如何复制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 Plug-in Masonry,了解这种功能.

Answer 3

我们发布了一个jQuery插件,因为我们为Wookmark多次提出相同的问题.它创建了这种类型的布局.在这里查看 - Wookmark jQuery插件