为了账号安全,请及时绑定邮箱和手机立即绑定

如何复制pinterest.com的绝对div堆栈布局

/ 猿问

如何复制pinterest.com的绝对div堆栈布局

慕莱坞森 2020-02-03 14:56:33

我正在寻找复制Pinterest.com的div布局,特别是如何调整列数以适应浏览器调整大小的更多/更少,并且垂直堆叠不取决于相邻列的高度。源代码显示每个div都是绝对位置。一位联合创始人回答了Quora的帖子,称这是使用自定义jQuery和CSS完成的。我希望结果从左到右排序。您可以提供任何指示使其成为我自己的方向,将不胜感激。



查看完整描述

3 回答

?
慕雪9262066

您也可以在jQuery Plug-in Masonry中检查这种功能。


查看完整回答
反对 2020-02-03
?
沧海一幻觉

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

预先:

  • 绝对放置图钉容器

  • 确定列宽

  • 确定列之间的边距(装订线)

设置一个数组:

  • 获取父容器的宽度;计算适合的列数

  • 创建一个空数组,其长度等于列数。使用此数组在构建布局时存储每一列的高度,例如,列1的高度存储为array [0]

遍历每个引脚:

  • 将每个引脚添加到最短一列

  • “ left:” ===列号(索引数组)乘以列宽+边距

  • “ top:” ===当时最短列的数组(高度)中的值

  • 最后,将引脚的高度添加到列的高度(数组值)

结果是轻量级的。在Chrome中,布局一整页的50多个引脚需要不到10毫秒的时间。


查看完整回答
反对 2020-02-03
?
30秒到达战场

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


所有DIV是:


div.tile {

    display: inline-block;

    vertical-align: top;

}

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


然后,在加载页面时,我会迭代JavaScript中的所有DIV,以消除它们之间的间隙。在以下情况下,它可以很好地工作:


DIV的高度差别不大。

您不必介意一些轻微的排序冲突(下面的某些元素可以在上面向上拉)。

您不必介意底线的高度不同。

这种方法的好处-您的HTML对搜索引擎有意义,可以与受防火墙禁用/阻止的JavaScript一起使用,HTML中的元素顺序与逻辑顺序相匹配(新的项目比旧的要早)


查看完整回答
反对 2020-02-03

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信