Organizational Research By

Surprising Reserch Topic

how to replicate pinterest coms absolute div stacking layout

how to replicate pinterest coms absolute div stacking layout  using -'jquery,css,layout'

I am looking to replicate's div layout, specifically how the number of columns adjusts to fit more/less on browser resize and the vertical stacking is not dependent on adjacent column heights. The source code shows that each div is position absolute. A co-founder has answered a Quora post stating it is done with custom jQuery and CSS. I would like the results sorted left to right.  Any direction you could provide to make it myself would be greatly appreciated.

asked Sep 16, 2015 by sumit_jaiswalmca
0 votes

Related Hot Questions

5 Answers

0 votes

I wrote the Pinterest script. The ID's are unrelated to the layout, and are used for other interaction-related JS. Here's the base of how it works:


  • Absolutely position the pin containers
  • Determine column width
  • Determine margin between columns (the gutter)

Setup an array:

  • Get the width of the parent container; calculate the # of columns that will fit
  • Create an empty array, with a length equaling the # of columns. Use this array to store the height of each column as you build the layout, e.g. the height of column 1 is stored as array[0]

Loop through each pin:

  • Put each pin in the shortest column at the moment it is added
  • "left:" === the column # (index array) times the column width + margin
  • "top:" === The value in the array (height) for the shortest column at that time
  • Finally, add the height of the pin to the column height (array value)

The result is lightweight. In Chrome, laying out a full page of 50+ pins takes <10ms.

answered Sep 16, 2015 by deepak gupta
0 votes

We released a jQuery plugin because we got the same question several times for Wookmark. It creates exactly this type of layout. View it here - Wookmark jQuery plugin

answered Sep 16, 2015 by sachin wagh
0 votes

Why dont you try this, simple js stuff

Or even this with jQuery and having scroll loading as well.

answered Sep 16, 2015 by loknath.ganji
0 votes

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

answered Sep 16, 2015 by amit_cmps
0 votes

You could use floats and size your div widths using percentages together with min-width to force divs to automatically fall of once minimum width is reached? Its the way we got it working on

answered Sep 16, 2015 by virendra.bajaj