jQuery 如何复制 pinterest.com 的绝对 div 堆叠布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7109362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to replicate pinterest.com's absolute div stacking layout
提问by chrickso
I am looking to replicate Pinterest.com's div layout, specifically how the number of columns adjusts to fit more/less on browser resize and the vertical stacking is not dependent on adjacent column heights. The source code shows that each div is position absolute. A co-founder has answered a Quora post stating it is done with custom jQuery and CSS. I would like the results sorted left to right. Any direction you could provide to make it myself would be greatly appreciated.
我希望复制 Pinterest.com 的 div 布局，特别是如何调整列数以适应浏览器调整大小的更多/更少，并且垂直堆叠不依赖于相邻的列高度。源代码显示每个 div 都是绝对位置。一位联合创始人回答了 Quora 的帖子，称它是用自定义 jQuery 和 CSS 完成的。我希望结果从左到右排序。您可以提供的任何方向让我自己制作它，我们将不胜感激。
采纳答案by Bob.
回答by Evan Sharp
I wrote the Pinterest script. The ID's are unrelated to the layout, and are used for other interaction-related JS. Here's the base of how it works:
我写了 Pinterest 脚本。ID 与布局无关，用于其他与交互相关的 JS。这是它的工作原理：
Beforehand:
预先：
- Absolutely position the pin containers
- Determine column width
- Determine margin between columns (the gutter)
- 绝对定位销容器
- 确定列宽
- 确定列之间的边距（装订线）
Setup an array:
设置一个数组：
- Get the width of the parent container; calculate the # of columns that will fit
- Create an empty array, with a length equaling the # of columns. Use this array to store the height of each column as you build the layout, e.g. the height of column 1 is stored as array[0]
- 获取父容器的宽度；计算适合的列数
- 创建一个空数组，其长度等于列数。使用此数组在构建布局时存储每列的高度，例如，第 1 列的高度存储为数组 [0]
Loop through each pin:
循环遍历每个引脚：
- Put each pin in the shortest column at the moment it is added
- "left:" === the column # (index array) times the column width + margin
- "top:" === The value in the array (height) for the shortest column at that time
- Finally, add the height of the pin to the column height (array value)
- 在添加时将每个引脚放在最短的列中
- "left:" === 列#（索引数组）乘以列宽+边距
- "top:" === 当时最短列的数组（高度）中的值
- 最后，将引脚高度添加到列高（数组值）
The result is lightweight. In Chrome, laying out a full page of 50+ pins takes <10ms.
结果是轻量级的。在 Chrome 中，布置 50 多个引脚的整页需要 <10 毫秒。
回答by GBKS
We released a jQuery plugin because we got the same question several times for Wookmark. It creates exactly this type of layout. View it here - Wookmark jQuery plugin
我们发布了一个 jQuery 插件，因为我们多次遇到 Wookmark相同的问题。它创建的正是这种类型的布局。在此处查看 - Wookmark jQuery 插件
回答by esp
Having looked at all options, I ended up implementing the layout similar to Pinterest in this way:
查看了所有选项后，我最终以这种方式实现了类似于 Pinterest 的布局：
All DIVs are:
所有 DIV 是：
div.tile {
display: inline-block;
vertical-align: top;
}
This makes them position in rows better than when they are floated.
这使得它们在行中的位置比浮动时更好。
Then when the page is loaded, I iterate all DIVs in JavaScript to remove gaps between them. It works acceptably well when:
然后当页面加载时，我在 JavaScript 中迭代所有 DIV 以消除它们之间的间隙。它在以下情况下运行良好：
- DIVs are not very different in height.
- You don't mind some minor violations of ordering (some elements that were below can be pulled up above).
- You don't mind the bottom line being of different height.
- DIV 的高度差别不大。
- 你不介意一些轻微的排序违规（下面的一些元素可以被拉到上面）。
- 你不介意不同高度的底线。
The benefit of this approach - your HTML make sense for search engines, can work with JavaScript disabled/blocked by firewall, the sequence of elements in HTML matches the logical sequence (the newer items before older)
这种方法的好处 - 您的 HTML 对搜索引擎有意义，可以与被防火墙禁用/阻止的 JavaScript 一起使用，HTML 中的元素序列与逻辑序列匹配（较新的项目在较旧的项目之前）
回答by I Am Goldtree
You could use floats and size your div widths using percentages together with min-width to force divs to automatically fall of once minimum width is reached? Its the way we got it working on http://www.goldtree.co.za/work
您可以使用浮点数并使用百分比和 min-width 来调整 div 宽度的大小，以强制 div 在达到最小宽度时自动下降？这是我们让它在http://www.goldtree.co.za/work 上工作的方式
回答by A Bright Worker
Why dont you try this, simple js stuff
你为什么不试试这个，简单的 js 东西
http://vanilla-masonry.desandro.com/index.html
http://vanilla-masonry.desandro.com/index.html
Or even this with jQuery and having scroll loading as well.
甚至这与 jQuery 和滚动加载以及。
回答by ant_Ti
They split entities by columns with ids (bad solution... better use class names) and then calculate positions by column groups
他们按带有 id 的列拆分实体（糟糕的解决方案...更好地使用类名），然后按列组计算位置
