如何复制 pinterest.com 的绝对 div 堆叠布局 [关闭]答案

【问题标题】：how to replicate pinterest.com's absolute div stacking layout [closed]如何复制 pinterest.com 的绝对 div 堆叠布局 [关闭]
【发布时间】：2011-10-29 21:02:34
【问题描述】：

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

【问题讨论】：

我用简单的 Jquery 和 CSS 编写了自己的代码。如果您希望在调整大小时改变它，只需将其包装在一个函数中并观察容器元素上的调整大小jsfiddle.net/92gxyugb/1

标签： jquery css layout

【解决方案1】：

他们按具有 id 的列拆分实体（不好的解决方案...最好使用类名），然后按列组计算位置

【讨论】：

+1 查看他们的源代码。
这对我来说很有趣，但我认为有更少的 js 计算更好的解决方案
我想你可以使用display: inline-block，但不同垂直高度的项目不会放在一起。
最好使用列容器（div 为float:left;，最后一个为overflow: hidden;）并在其中存储元素
好点。如果你真的想走 JavaScript 路线，你可以使用 jQuery Masonry？

【解决方案2】：

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

事前：

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

设置数组：

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

循环遍历每个引脚：

在添加时将每个引脚放在最短的列中
"left:" === 列 #（索引数组）乘以列宽 + 边距
"top:" === 数组中当时最短列的值（高度）
最后，将引脚的高度添加到列高（数组值）

结果是轻量级的。在 Chrome 中，布置一整页 50 多个图钉需要

【讨论】：

你的意思是如何计算列的高度？如果你不知道里面物品的数量和高度，你怎么知道它应该有多高？你有没有机会布置一些伪代码来演示？
这是一个可靠的教程 - benholland.me/javascript/…
来自匿名用户的反馈（在编辑队列中找到）：奇怪的是，我在 jQuery 中做了完全相同的脚本，但实际上创建了一个具有 1 行和 N 列的表并只是附加它们略有不同从左到右优先到最短的列。尽管我还添加了从左到右定位时实际跳过一列所需的“最小高度差”常量，但这为布局提供了按时间顺序直观的显示，而不会失去尽可能均匀的高度
@MichaelGiovanniPumo 我认为高度应该在布局之前知道（在 Pinterest 的情况下），它们没有 div 相互重叠的“初始”状态。如果高度未知，则无法执行此操作。
@hollandben 的链接已失效，新链接：benholland.me/javascript/2012/02/20/…

【解决方案3】：

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

【讨论】：

这个解决方案的加载速度似乎比砌体快
你觉得哪个更好？标记还是砖石？
我更喜欢这个而不是砖石，看起来像迈克尔说的那样快。

【解决方案4】：

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

【讨论】：

真正令人惊叹的图书馆。现在我使用它没有任何问题。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

甚至可以使用 jQuery 并进行滚动加载。

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

【讨论】：

【解决方案7】：

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

所有的 DIV 都是：

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

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

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

DIV 的高度差别不大。
您不介意一些轻微的排序违规（下面的一些元素可以拉到上面）。
你不介意底线的高度不同。

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

【讨论】：

嘿，你能告诉我你是如何计算你必须减去的偏移量的吗？还有你是怎么解决最后一个元素在右边的问题的，因为有一个元素稍微大一点，把它推到那里。
@LukasOppermann 1) 瓦片的偏移量是上一行同一列瓦片的偏移量与上一行最高瓦片的高度之差的总和。上一行同一列中的平铺高度。查看dev.sheeporpig.com/news（您首先需要单击链接dev.sheeporpig.com/sheep/3210 才能访问开发站点-这样您就可以在单独的文件中看到未压缩和注释的脚本），脚本文件stock_news.js，函数compressTiles。
@LukasOppermann 2）如果您使用 CSS 作为答案（尤其是 display:inline-block），则不会发生。仅当您浮动：离开您的 div 时才会发生这种情况。我不使用浮点数。