Does anyone know how Pinterest.com's layout works?

Question

On http://pinterest.com/ there are \'pins\' ie

s of varying height but they all seem to render very well with no \'gaps\' or line breaks to interrupt the flow. Is

Answer 1

Having looked at all options, I ended up implementing the layout similar to Pinterest in this way:

All DIVs are:

div.tile {
    display: inline-block;
    vertical-align: top;
}

This makes them position in rows better than when they are floated.

Then when the page is loaded, I iterate all DIVs in JavaScript to remove gaps between them. It works acceptably well when:

1. DIVs are not very different in height.
2. You don't mind some minor violations of ordering (some elements that were below can be pulled up above).
3. You don't mind the bottom line being of different height.

The benefit of this approach - your HTMLs make sense for search engines, can work with Javascript disabled/blocked by firewall, the sequence of elements in HTML matches the logical sequence (the newer items before older). You can see it's working at http://SheepOrPig.com/news