Is Pinterest style available? What is masonry?


Sorry, but the Pinterest waterfall layout is not available in Justified Image Grid. It's horizontal and is without columns. It might get added as part of a future update, though. Why, what's wrong with it, you might ask... let's see a comparison.

Defining the masonry layout

With so many grid styles and plugins, it's hard to grasp what the difference is. There could be a misconception about what is considered masonry. By the JIG developer's definition, masonry is a strictly horizontal grid where thumbnails align just like bricks in the wall. After all, masons are a craftsmen who lay bricks. They don't do it vertically. It's often confused with the waterfall grid layout that Pinterest uses.

Eye movement and thumbnail flow direction

The natural reading direction of most countries is horizontal, either left-to-right or right-to-left. When you tell a story with pictures, you do it in your reading order. For example, wedding photos. Can you imagine that in a vertical layout? How can you tell which image is next? There is no natural flow except a sense of infinity by scrolling and scrolling. Indeed, it's good for galleries where the order is not important, that's why it works so well for Pinterest and Tumblr. When you look at a JIG gallery, your eye movement is the same as during reading, it's what your eyes are programmed to. Do you think it's a coincidence that Flickr (the largest photo site), Shutterstock, Google image search, Google+, Google Photos, 500px front page all use this horizontal layout?

Photo orientation balance

The usual argument is that (in the horizontal layout) portrait images get diminished among many landscape shots. Think about it, why would this be any different in the vertical layout? Orientation roles would simply get switched. Landscape shots would have small surface area in comparison to "huge" portrait photos. Justified Image Grid makes an effort to increase row height where a portrait photo is present, while decreasing row height for landscape-only rows. This results in a balanced grid. Applying the same logic to a column-based gallery would be problematic as they consist of a predefined, relatively small number of columns with many thumbnails in each. Any of them can contain a portrait. Therefore column widths can't be juggled so well, unlike row heights in a horizontal masonry layout (JIG).

Helpful?  Yes  No 71% found this satisfactory.
This FAQ entry was posted in Visual on June 25, 2015