Masonry Layout

What is a Masonry Layout?

A masonry layout is a way to display elements on screen (or in a webpage) such that they're placed in parallel columns (or, in rare cases, in parallel rows). The masonry layout is different from a grid because the "bricks" can have different heights (or widths), so they don't align perfectly in a grid.

The user scrolls vertically in direction to the bottom. Generally, in a social media, you have a feed of posts that is a single column, and more posts load when the user reaches the bottom of the list. In a masonry layout, there are multiple columns, each of them looks like a separate "feed" in a sense, but they're actually just one single feed of posts—the posts are algorithmically distributed between the columns as they're loaded.

Examples of Vertical Masonry

Horizontal Masonry

Typically, "masonry" refers to a layout with vertical "bricks," columns, rather than horizontal ones. But a horizontal masonry layout is also possible.

The benefit of vertical bricks is that you can define an exact width for the bricks, which makes it easier to handle text and other user interface elements, like buttons. You're guaranteed to have at least that much width.

In horizontal masonry layout, you would have the opposite situation: every brick has exact the same height, but the width varies. Very few websites have horizontal feeds (Plurk is one of them), which means you'll probably still scroll vertically, rather than horizontal. This means you won't have a constant number of rows that will always have the same height like you do with vertical masonry, but instead an ever-growing wall of stacked bricks that can have varying heights.

Examples of Horizontal Masonry

Implementation

To program a masonry layout, all you need to do is:

1. When the user reaches the bottom of the masonry layout, load N posts.
2. For each post:
3. Figure out which column is the "shortest." This is done by comparing the bottom of the lowest post in each column.
4. Add a post to the shortest column.
5. Go to step 2.

Besides this, you'll also need to unload posts if the users scrolls too much to avoid running out of memory, replacing them with some sort of "spacer" that has the total height of the posts unloaded.