如何复制pinterest.com的绝对div堆叠布局
我正在寻找复制Pinterest.com的div布局，具体如何调整列的数量以适应浏览器resize和垂直堆叠不依赖于相邻列高度。 源代码显示每个div是绝对位置的。 一个联合创始人已经回答了一个Quora的post，声明它是用自定义的jQuery和CSS完成的。 我想结果从左到右sorting。 任何你可以提供自己的方向将不胜感激。
你也可以检查jQuery Plug-in Masonry的这种function。
我写了Pinterest脚本。 ID与布局无关，用于其他与交互相关的JS。 这是它如何工作的基础：
预先：
- 绝对放置针容器
- 确定列宽
- 确定列之间的边距（阴沟）
安装一个数组：
- 获取父容器的宽度; 计算适合的列数
- 创build一个空数组，长度等于列数。 使用此数组来存储构build布局时每个列的高度，例如列1的高度存储为数组[0]
循环通过每个引脚：
- 将每个引脚添加到最短的列中
- “left：”===列＃（索引数组）乘以列宽+ margin
- “top：”===当前最短列的数组（高度）值
- 最后，将该针的高度添加到列高度（数组值）
结果是轻量级的。 在Chrome中，布满整个页面的50多个引脚需要<10ms。
我们发布了一个jQuery插件，因为我们几次得到了相同的问题。 它创build这种types的布局。 在这里查看 – Wookmark jQuery插件
看了所有的选项后，我用这种方式实现了与Pinterest类似的布局：
所有DIV是：
div.tile { display: inline-block; vertical-align: top; } 这使得它们在行中的位置比在浮动时更好。
然后，当页面加载时，我遍历JavaScript中的所有DIV，以消除它们之间的差距。 在以下情况下，它的工作可以接受：
- DIV在身高方面差别不大。
- 你不介意一些轻微的违规行为（一些以下的元素可以被拉高）。
- 你不介意底线是不同的高度。
这种方法的好处 – 您的HTML对search引擎有意义，可以在防火墙禁用/阻止JavaScript的情况下工作，HTML中的元素顺序与逻辑顺序相匹配（较旧的较早的项目）
他们用id（不好的解决scheme…更好地使用类名称）的列分割实体，然后按列组计算位置
你可以使用浮动和大小你的div宽度使用百分比与最小宽度迫使div一旦最小宽度达到自动下降？ 它的方式，我们得到它的工作http://www.goldtree.co.za/work
