how to replicate pinterest.com's absolute div stacking layout
I am looking to replicate Pinterest.com'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.
Answer
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:
Beforehand:
- 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.