如何复制pinterest.com的绝对div堆叠布局

Question

我希望复制Pinterest.com的div布局，特别是如何调整列数以适应更多/更少的浏览器调整大小，垂直堆叠不依赖于相邻的列高度。源代码显示每个div都是绝对位置。联合创始人回答了一个Quora帖子，说明它是用自定义jQuery和CSS完成的。我希望结果从左到右排序。我们非常感谢您为自己制作的任何方向。

Answer 1

我写了Pinterest脚本。 ID与布局无关，用于其他与交互相关的JS。以下是它的工作原理：

事前：

• 绝对定位销容器
• 确定列宽
• 确定列之间的边距（装订线）

设置数组：

• 获取父容器的宽度;计算适合的列数
• 创建一个空数组，其长度等于列数。在构建布局时使用此数组存储每列的高度，例如第1列的高度存储为数组[0]

遍历每个引脚：

• 将每个针脚添加到最短的列中
• “left：”===列＃（索引数组）乘以列宽+边距
• “top：”===当时最短列的数组（高度）中的值
• 最后，将引脚的高度添加到列高（数组值）

结果很轻巧。在Chrome中，布局一整页50多个引脚需要<10毫秒。

Answer 2

您还可以查看jQuery插件Masonry，了解此类功能。

Answer 3

我们发布了一个jQuery插件，因为Wookmark我们多次得到同样的问题。它创建了这种类型的布局。 在此处查看 - Wookmark jQuery plugin

Answer 4

看了所有选项之后，我最终以这种方式实现了类似于Pinterest的布局：

所有DIV都是：

div.tile {
    display: inline-block;
    vertical-align: top;
}

这使得它们在行中的位置比浮动时更好。

然后在加载页面时，我迭代JavaScript中的所有DIV以消除它们之间的间隙。它适用于以下情况：

1. DIV的身高差异不大。
2. 你不介意一些轻微违反订购的行为（下面的一些元素可以在上面提取）。
3. 你不介意底线有不同的高度。

这种方法的好处 - 您的HTML对搜索引擎有意义，可以使用禁用/阻止防火墙的JavaScript，HTML中的元素序列与逻辑顺序（旧版之前的较新项目）匹配

Answer 5

他们按ID分组实体（不良解决方案......更好地使用类名），然后按列组计算位置

Answer 6

您可以使用浮点数并使用百分比和最小宽度来调整div宽度，以强制div达到最小宽度时自动降低？它是我们在http://www.goldtree.co.za/work

上工作的方式

Answer 7

为什么不试试这个简单的js东西

http://vanilla-masonry.desandro.com/index.html

甚至可以使用jQuery和滚动加载。

http://masonry.desandro.com/index.html