This question already has an answer here:
这个问题在这里已有答案:
- Does anyone know how Pinterest.com's layout works? 8 answers
有谁知道Pinterest.com的布局是如何工作的? 8个答案
In pinterest.com, the divs have variable length, yet there are no gaps between the rows. Is it possible to get this effect using an unordered list and css? Are they using any javascript to achieve that "compact" look? When I tried it, there is always a gap between two rows to accommodate the tallest div from the first row...
在pinterest.com中,div具有可变长度,但行之间没有间隙。是否可以使用无序列表和CSS来获得此效果?他们使用任何JavaScript来实现“紧凑”的外观吗?当我尝试它时,两行之间总是存在间隙以容纳第一行中最高的div ...
3 个解决方案
#1
4
If you use Firebug or Chrome's web inspector, you'll see that each of the .pin divs has an absolute position, which is presumably set with JavaScript.
如果您使用Firebug或Chrome的Web检查器,您会看到每个.pin div都有一个绝对位置,可能是用JavaScript设置的。
#2
4
It's done via jQuery Masonry available on github https://github.com/desandro/masonry
它是通过github https://github.com/desandro/masonry上提供的jQuery Masonry完成的
#3
1
There's a lot of jQuery Plugins that archive that.
有很多jQuery插件存档。
I like "Isotope - An exquisite jQuery plugin for magical layouts"
我喜欢“同位素 - 一个精美的jQuery插件,用于神奇的布局”
#1
4
If you use Firebug or Chrome's web inspector, you'll see that each of the .pin divs has an absolute position, which is presumably set with JavaScript.
如果您使用Firebug或Chrome的Web检查器,您会看到每个.pin div都有一个绝对位置,可能是用JavaScript设置的。
#2
4
It's done via jQuery Masonry available on github https://github.com/desandro/masonry
它是通过github https://github.com/desandro/masonry上提供的jQuery Masonry完成的
#3
1
There's a lot of jQuery Plugins that archive that.
有很多jQuery插件存档。
I like "Isotope - An exquisite jQuery plugin for magical layouts"
我喜欢“同位素 - 一个精美的jQuery插件,用于神奇的布局”