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
divis positioned absolute. I would love to know how to accomplish this.
What technology is used to generate pinterest.com’s absolute div stacking layout? →
My best guess is this:
Assumptions:
1. Everything is fixed width
2. Precompute height and width of each pin at load time
3. Compute the number of columns with window listeners (each pin is 237 px in width)
Steps:
1. Keep an object in memory with the number of the column as the key and the y coordinate of the top left corner as the value.
2. Each time you encounter a pin, find the min y value in your object.
3. Adjust the coordinates and put pin at location.
4. Update the y coordinate of the column in the object
5. rinse and repeat
Obviously this isn’t optimized. For example each pin probably has an associated object in memory for it that has various amounts of information. There’s probably some update function as well that recomputes heights on the fly when you add a comment or a like. But this feels like the basic algorithm