pinterest如何实现其布局?

时间:2012-10-25 17:56:53

标签: javascript html css html-lists

在pinterest.com中,div的长度可变,但行之间没有间隙。是否可以使用无序列表和CSS来获得此效果?他们是否使用任何JavaScript来实现“紧凑”的外观?当我尝试它时,两行之间总是存在间隙以容纳第一行中最高的div ...

3 个答案:

答案 0 :(得分:4)

如果您使用Firebug或Chrome的网络检查器,您会看到每个.pin div都有一个绝对位置,可能是用JavaScript设置的。

答案 1 :(得分:4)

通过github jQuery Masonry上提供的https://github.com/desandro/masonry完成

答案 2 :(得分:1)

有很多jQuery插件可以存档。

我喜欢“同位素 - 一个用于神奇布局的精美jQuery插件”

http://isotope.metafizzy.co/