将Div元素排列在其他元素旁边- Pinterest或Pose样式

Question

我想在像Pinterest或Pose这样的网站上实现图像/div的样式，无论它们的分辨率是什么，都要将它们排列在一起。我已经尝试将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

因为第三个分区(.differentHeightDiv)的高度更大，我知道如果所有的高度都相等，事情就会正常工作，但如果它不相等，我想要一个解决方案(我的意思是，如果每个分区有不同的分辨率/宽高比)，请有人在这方面帮助我。

谢谢。

Answer 1

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

Answer 2

Airbnb刚刚开源了infinity.js

Infinity.js是一个用于网络的UITableView :它加快了滚动长长列表的速度，并为用户保持无限订阅的流畅和稳定。

ListView是在发生scroll事件时将内容移入和移出DOM的容器。通过确保屏幕上不会同时出现太多元素，ListViews可以帮助降低昂贵页面的重绘时间(并平滑滚动)。ListViews擅长加速复杂的超文本标记语言元素的长列表，其中新内容经常追加到末尾，而现有内容很少被删除。

View a demo here