jquery - 如何复制 pinterest.com 的绝对 div 堆叠布局

标签 jquery css layout

<分区>

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

最佳答案

我编写了 Pinterest 脚本。 ID 与布局无关,用于其他与交互相关的 JS。这是其工作原理的基础:

事先:

  • 绝对定位销容器
  • 确定列宽
  • 确定列之间的边距(装订线)

设置一个数组:

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

遍历每个引脚:

  • 在添加时将每个图钉放在最短的列中
  • "left:"=== 列 #(索引数组)乘以列宽 + 边距
  • "top:"===当时最短列的数组(高度)中的值
  • 最后将pin的高度加到列高(数组值)

结果是轻量级的。在 Chrome 中,布置包含 50 多个图钉的完整页面需要 <10 毫秒。

关于jquery - 如何复制 pinterest.com 的绝对 div 堆叠布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7109362/

相关文章:

javascript - 更改 JQuery Mobile 中的自定义菜单

html - 使用 css 和 html 调整浏览器窗口大小时,如何使 div 元素 "float"向上?

css - 在不同屏幕宽度的容器中堆叠响应图像

Android 在元素下方包含布局

silverlight - 方向改变时保持相同的布局

javascript - 限制 'Add Row' 函数中添加的行数为 10

javascript textarea 每行计算字符数

javascript - Bootstrap Bootbox 在单击保存按钮后删除弹出窗口

html - 在 overflow hidden 的父级中显示 div 元素

javascript - 如何让 jquery 在 Bootstrap v3 的面板内添加面板