Pinterest 如何实现绝对定位的动态网格布局？

绝对 Div 堆叠布局：揭开 Pinterest 的秘密

Pinterest 迷人的网格布局吸引了许多开发人员的灵感，但复制其无缝的列调整和垂直堆叠提出了挑战。根据 Pinterest 联合创始人之一的 Quora 揭露，这里深入探讨了它是如何完成的：

绝对定位和自定义脚本

Pinterest 布局中的每个 div 容器绝对定位，可以精确控制其位置。关键在于自定义 jQuery 和 CSS 脚本，该脚本协调布局的动态行为。

计算列和装订线尺寸

在定位 div 之前，脚本确定列宽度和列之间的边距或“装订线”。这些值会影响页面上可以容纳的列数。

使用列数组进行高度跟踪

创建一个数组来存储每列的高度。当计算新 div 的“顶部”位置时，脚本会识别最短的列（数组中高度值最小的列）并将 div 放置在那里。

动态定位和高度调整

“左”位置是根据列号和列宽加上边距计算的。 “顶部”位置由当时最短柱的高度确定。添加 div 时，脚本会更新相应列的高度值以反映新的高度。

轻量级且响应式

这种方法会产生高度响应的布局可以有效地适应浏览器大小调整和不同的屏幕尺寸。尽管该脚本很复杂，但它是轻量级的，可以在 10 毫秒内处理带有大量引脚的页面布局。

通过了解绝对定位和自定义脚本之间复杂的相互作用，开发人员可以创建动态且灵活的布局，类似于 Pinterest 的视觉效果吸引人的网格。

以上是Pinterest 如何实现绝对定位的动态网格布局？的详细内容。更多信息请关注PHP中文网其他相关文章！