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

我正在寻找复制Pinterest.com的div布局，特别是如何调整列数以适应浏览器调整大小的更多/更少，并且垂直堆叠不取决于相邻列的高度。源代码显示每个div是绝对位置。一位联合创始人回答了Quora的一篇文章，指出这是使用自定义jQuery和CSS完成的。我希望结果从左到右排序。您可以提供任何指示使其成为我自己的方向，将不胜感激。

您也可以在jQuery Plug-in Masonry中检查这种功能。

我写了Pinterest脚本。这些ID与布局无关，并且用于其他与交互相关的JS。这是其工作原理的基础：

预先：

• 绝对放置图钉容器
• 确定列宽
• 确定列之间的边距（装订线）

设置一个数组：

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

遍历每个引脚：

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

结果是轻巧的。在Chrome中，布局一整页的50多个引脚需要不到10毫秒的时间。

我们发布了一个jQuery插件，因为针对Wookmark多次遇到相同的问题。它正是创建这种类型的布局。在这里查看-Wookmark jQuery插件

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

所有DIV是：

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

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

然后，在加载页面时，我会迭代JavaScript中的所有DIV，以消除它们之间的间隙。在以下情况下，它可以很好地工作：

1. DIV的高度差别不大。
2. 您不必介意一些轻微的排序冲突（下面的某些元素可以在上面向上拉）。
3. 您不必介意底线的高度不同。

这种方法的好处-您的HTML对搜索引擎有意义，可以与被防火墙禁用/阻止的JavaScript一起使用，HTML中的元素顺序与逻辑顺序相匹配（新的项目比旧的要早）

他们按具有ID的列对实体进行拆分（错误的解决方案……更好地使用类名），然后按列组计算位置

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

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

甚至使用jQuery并具有滚动加载功能。

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

您可以使用float并使用百分比和min-width来设置div宽度的大小，以在达到最小宽度时强制div自动下降？这是我们在http://www.goldtree.co.za/work上工作的方式