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

因为3'rd Div（.differentHeightDiv）的高度更高，我知道如果所有高度相等但事情会有效但我想要一个解决方案，如果它不相等（我的意思是如果每个div有不同的分辨率/宽高比）请一些人请帮助我。

感谢。

Answer 1

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

背后的基础知识

Answer 2

Airbnb刚刚开源infinity.js

Infinity.js是一个用于网络的UITableView：它加快了滚动速度   通过长列表，保持您的无限馈送顺畅和稳定   你的用户。

ListView是一个将内容移入和移出DOM的容器   滚动事件。 ListViews有助于保持昂贵页面的重绘时间   向下（并滚动平滑）确保永远不会有   屏幕上的许多元素一次。 ListViews在超速驾驶方面表现出色   复制HTML元素的长列表，其中包含新内容   经常附加到最后，很少删除现有内容。

View a demo here

安排Div元素堆叠在其他旁边 - Pinterest或Pose风格

2 个答案: