如何复制 Pinterest 的响应式 Div 堆叠布局？

复制 Pinterest 的绝对 Div 堆叠布局

Pinterest 独特的 div 布局给寻求复制其功能的程序员带来了挑战。用于根据浏览器调整大小动态调整布局并防止垂直堆叠依赖的自定义 jQuery 和 CSS 让许多人想知道如何实现类似的结果。

答案：

Pinterest 布局背后的核心原则涉及绝对定位图钉容器、确定列宽和装订线大小，以及利用数组来跟踪每个图钉容器的高度

1. 定位引脚容器：

每个引脚容器应绝对定位在父容器内。这允许各个图钉彼此独立放置。

2. 计算列和装订线尺寸：

确定图钉容器的可用宽度和计算适合的列数。使用生成的列宽和预定义的装订线大小来计算整体布局参数。

3. 基于数组的高度跟踪：

初始化数组长度等于列数。当您迭代每个引脚时，确定当时哪一列的高度最短。将此高度存储在相应的数组元素中。

4. 引脚放置：

迭代每个引脚和：

• 将其放置在高度最短的列内（由
• 将“left”CSS 属性设置为列索引乘以列宽和间距。
• 将“top”CSS 属性设置为数组中存储的高度选定的列。
• 通过添加图钉的高度来更新列高度（数组值）。

通过遵循这些步骤，可以创建一个模仿 Pinterest 响应行为和高效引脚放置算法的布局。

以上是如何复制 Pinterest 的响应式 Div 堆叠布局？的详细内容。更多信息请关注PHP中文网其他相关文章！