Thư viện Mosaic Grid với các hình ảnh có kích thước động [đã đóng]


80

Tôi vừa nhận được thiết kế sau cho một dự án, cho một thư viện lưới hình ảnh, với các hình ảnh chiều rộng & chiều cao động (hình ảnh do người dùng gửi). (Ảnh chụp màn hình cuối bài)

Tôi đã thử jQuery Masonry , Tympanus Automatic Image MontageCSS-Tricks Seemless Responsive Photo Grid , nhưng mỗi cái đều có giới hạn.

  • Jquery Masonry cho phép cả chiều rộng và chiều cao trở nên động, tuy nhiên sẽ có những khoảng trống được tạo ra
  • 2 tập lệnh sau, tạo ra các lưới rất đẹp, nhưng với vấn đề là chiều rộng hoặc chiều cao phải tĩnh

CHỈNH SỬA: Tôi đã xem qua, Isotope , gần như hoàn hảo và tôi có thể sẽ sử dụng nó, trừ khi có thứ gì đó khắc phục được chính xác nhu cầu của tôi. Do đó câu hỏi của tôi vẫn như cũ ...

Có tập lệnh javascript nào (tốt nhất là jQuery) có thể tạo ra một bức tranh khảm hoàn toàn động (liên quan đến kích thước hình ảnh), giống như trong ảnh chụp màn hình bên dưới không?

Cảm ơn vì bất kì sự giúp đỡ


Bộ sưu tập


Cảm ơn vì nó giống như những gì tôi cần. Bạn có thể vui lòng thêm điều này làm câu trả lời để tôi có thể ghi công cho bạn một cách hợp lý và đánh dấu câu hỏi là đã trả lời không?
Dogoku

@Dogoku Bạn có thể chia sẻ cách làm động đồng thời chiều cao và chiều rộng trong Isotope không?
Mark Vital

Cảnh báo: liên kết Tympanus Automatic Image Montage là một thứ rác rưởi.
shiphape

Bạn có thể sử dụng liên kết . Đó là phản ứng nhanh và có các tùy chọn khác nhau có sẵn như liên kết, biểu tượng, hộp đèn, vv
RN Kushwaha

Tôi muốn đầu ra giống như hình trên. Các hình ảnh có kích thước khác nhau nhưng cuối cùng không muốn có bất kỳ khoảng trống nào. Lưới kiểu tàu điện ngầm tự do không phù hợp với tôi vì tất cả đều là hình ảnh. Hãy giúp tôi!
monisha

Câu trả lời:


64

Tôi đề nghị Freewall. Nó là một plugin jQuery đa trình duyệt và đáp ứng để giúp bạn tạo nhiều loại bố cục lưới: bố cục linh hoạt, bố cục hình ảnh, bố cục lưới lồng nhau, bố cục kiểu metro, bố cục pinterest như ... với hiệu ứng hoạt hình CSS3 đẹp mắt và các sự kiện gọi lại. Freewall là giải pháp tất cả trong một để tạo bố cục lưới động cho máy tính để bàn, thiết bị di động và máy tính bảng.

Trang chủ và tài liệu: cũng được tìm thấy here.


12
Nghiên cứu này: có thể hữu ích crispymtn.com/stories/...
mayankcpdixit

@mayankcpdixit cái này cực kỳ hữu ích, cảm ơn
zavr

1
tnx @zavr Tôi đã làm một cái gì đó của riêng mình. github.com/mayankcpdixit/grid-no-white
mayankcpdixit.

@mayankcpdixit, tuyệt vời, tốt lắm. Tôi cũng đã tạo plugin jQuery của riêng mình.
zavr

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.