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

Question

On http://pinterest.com/ there are 'pins' ie <div>s of varying height but they all seem to render very well with no 'gaps' or line breaks to interrupt the flow. Is there a good/simple explanation of how they get the CSS to behave and implement that (I am hoping to learn and understand rather than just cargo-cult their CSS file!). Thanks in advance

Answer 1

Check out JQuery Masonry, it will be the simplest way to achieve the layout you want. http://masonry.desandro.com/

I did some reading of Pinterest's javascript a few months ago to figure this out myself. In short, they don't do it with CSS at all. They position all of their boxes/pins dynamically by iterating through them all, calculating the height, and dropping it at the bottom of whichever column that has the shortest height at the moment (adding that box's height to it). Basically, there's no trick to it, it's just Javascript.

Answer 2

Css can't actually do that in the way you want it to. Javascript, like this example, can.

Due to how rows of floated or inline-blocked content behave, css isn't right for the job. You'd have to dynamically generate vertical columns of content and place them side by side, meaning you'd have to fight to get current content at the top. It would be kind of a pain, really. You'd also lose the responsiveness to window width.