2012-06-07 21 views
77

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

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

  • Jquery Masonry phép cho cả chiều rộng và chiều cao được năng động, tuy nhiên có những khoảng trống được tạo ra
  • 2 kịch bản thứ hai, tạo ra các lưới rất đẹp, nhưng với những vấn đề mà chiều rộng hoặc chiều cao phải tĩnh

EDIT: 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ó điều gì đó khắc phục chính xác nhu cầu của tôi. Do đó, câu hỏi của tôi vẫn giữ nguyên ...

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

Nhờ sự giúp đỡ


Gallery

+0

Cảm ơn bạn giống như những gì tôi cần. Bạn có thể thêm câu trả lời này làm câu trả lời để tôi có thể cung cấp tín dụng cho bạn đúng cách và đánh dấu câu hỏi là đã trả lời không? – Dogoku

+0

Chúc mừng, vừa làm. – Systembolaget

+0

@Dogoku Bạn có thể chia sẻ cách bạn tạo ra chiều cao và chiều rộng đồng thời động trong Đồng vị không? –

Trả lời

59

Tôi đề nghị Freewall. Đây là một plugin jQuery hỗ trợ nhiều loại bố trí: bố cục linh hoạt, bố trí hình ảnh, bố cục lưới lồng nhau, bố trí kiểu tàu điện ngầm, sở thích như bố cục ... với hiệu ứng hoạt hình CSS3 đẹp mắt và gọi lại sự kiện. 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 tìm thấy here.

+12

Nghiên cứu điều này: có thể hữu ích http://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery – mayankcpdixit

+0

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

+1

tnx @zavr Tôi đã thực hiện một cái gì đó của riêng tôi. https://github.com/mayankcpdixit/grid-no-white – mayankcpdixit

1

Tôi nghĩ bạn có thể thử "Google Grid Gallery", dựa trên Masonry đã nói ở trên với một số bổ sung, như kiểu và trình xem.