Pinterest’s div stacking layout algorithm

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 positioned absolute. I would love to know how to accomplish this.

What technology is used to generate pinterest.com’s absolute div stacking layout? →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

  1. 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

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.