How does pinterest achieve its layout?

Question

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...

You do know you can look through the code of both the javascript and the html and css right? — Florin Stingaciu, Oct 25 '12 at 17:58
Yes I did...however, they don't seem to be using unordered lists... — Prabhu, Oct 25 '12 at 18:00
similar rendering method with http://isotope.metafizzy.co/index.html — Lunatikzx, Oct 25 '12 at 18:02

score 4 · Answer 1 · answered Oct 25 '12 at 17:58

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.

answered Oct 25 '12 at 17:58

David Wolever

148,955
89
346
502

score 4 · Answer 2 · answered Oct 25 '12 at 18:00

4

It's done via jQuery Masonry available on github https://github.com/desandro/masonry

answered Oct 25 '12 at 18:00

Francis Ouellet

505
4
15

1

Just to clarify, Pinterest does not use Masonry (at least not last time I looked at their code), but Masonry will give you a similar result. – Michael Mior Oct 25 '12 at 18:05

score 1 · Answer 3 · answered Oct 25 '12 at 18:00

1

There's a lot of jQuery Plugins that archive that.

I like "Isotope - An exquisite jQuery plugin for magical layouts"

http://isotope.metafizzy.co/

answered Oct 25 '12 at 18:00

Thanks for the link. Looks like this is similar to the Masonry plugin posted by @Francis. – Prabhu Oct 25 '12 at 18:05

How does pinterest achieve its layout?

3 Answers3