Sắp xếp các phần tử Div xếp chồng lên nhau theo phong cách khác - Pinterest hoặc Pose

Question

Tôi muốn triển khai kiểu hoặc được sử dụng cho hình ảnh/div được sắp xếp bên cạnh các trang khác như Pinterest hoặc Pose bất kể độ phân giải cá nhân của chúng là bao nhiêu. Tôi đã cố gắng sắp xếp div bên cạnh nhau như thế này

<div id="mainContainer"> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="differentHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
<div class="sameHeightDiv"></div> 
</div> 

Css:

#mainContainer { width:800px; } 
.sameHeightDiv{ float: left; width: 100px; height:190px; } 
.differentHeightDiv { float: left; width: 100px; height:225px; } 

nào được bố trí như

1 2 3 4 
     5 
6 7 8 

Vì 3'rd Div (.differentHeightDiv) chiều cao lớn , tôi biết mọi thứ sẽ hoạt động nếu tất cả các chiều cao đều bình đẳng nhưng tôi muốn một giải pháp nếu không bình đẳng của nó (tôi có nghĩa là nếu mỗi div có độ phân giải/tỷ lệ khác nhau) Một số hãy giúp tôi về điều này.

Cảm ơn.

Answer 1

Đây là một hướng dẫn tốt đẹp trên của cơ bản đằng sau việc đạt được bố trí Pinterest http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

Answer 2

Airbnb vừa mở nguồn infinity.js

Infinity.js là một UITableView cho web: nó tăng tốc di chuyển qua danh sách dài và giữ nguồn cấp dữ liệu vô hạn của bạn trơn tru và ổn định cho người dùng của bạn.

Một ListView là một vùng chứa di chuyển nội dung vào và ra khỏi DOM trên sự kiện cuộn. ListViews giúp giữ thời gian lặp lại của các trang đắt tiền xuống (và cuộn mượt) bằng cách đảm bảo rằng không bao giờ quá nhiều phần tử trên màn hình cùng một lúc. ListViews nổi trội khi tăng tốc lên danh sách dài các phần tử HTML phức tạp, trong đó nội dung mới là thường được nối vào cuối và nội dung hiện có hiếm khi bị xóa.

View a demo here