jquery - 安排 Div 元素堆叠在一起 - Pinterest 或 Pose 样式

Question

我想在像 Pinterest 这样的网站中实现图像/div 所使用或遵循的样式。或 Pose不管他们的个人决议是什么。我试过像这样将 div 并排放置

<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; }

这样排列的

1 2 3 4
      5
6 7 8

因为 3'rd Div (.differentHeightDiv) 高度更大，我知道如果所有高度都相等，事情会起作用但如果它不相等我想要一个解决方案(我的意思是如果每个 div 有不同的分辨率/纵横比)请有人帮我解决这个问题。

谢谢。

Answer 1

这是一个很好的教程，介绍了实现 pinterest 布局背后的基础知识 http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/