alogo

Masonry.js: Portfolio Layout

Masonry is a JavaScript routine that manages html code blocks and images on a Web  page area giving them a neatly stacked portfolio layout. masonry works best when the width of the blocks are the same or multiples like 200px, 400px, 800px etc. The height of the blocks can vary but if it is too widely varying then the fit of the layout can suffer. A screenshot example shows how Masonry attempts to layout in close packed fashion all of the blocks:

Masonry is useful for product or portfolio sites that have to cater to mobile as well as PC web users with their widely varying screen sizes. Masonry is responsive and intelligently rebalances the blocks and images. The following live sample shows how:
[iframe src=’http://theopensourcery.ca/3-cornerstamppolish2.html’ width=’100%’ height=’650′] Notice 3 things about this live sample screen:
1)if you widen or narrow the screen sufficiently Masonry rebalances the blocks on the screen to fit most closely the Masonry options for padding, margin, and block columnWidth;
2)However, Masonry does not maintain the order of the blocks as laid out on the HTML page but rather moves blocks around for the tightest fit. Note the pink block is the last one on the original HTML page;
3)But Masonry also has a block, class=cornerstamp, which will be stamped into the upper right corner which is is convenient for a non-shuffling which will stay locked into the upperight corener info block about the portfolio or products on display. Quick note, corner stamping the upper left corner, does not work as well as the upper right.

An important point to note is that Masonry v.2.1.08 provides capabilities that are not available in Masonry version 3 including the ability to provide border, padding and background CSS for the Masonry container plus embedding the Masonry container in other wrappers for a structured wireframe layout. Also Masonry’s animation options are curtailed in the move to version 3.So given that WordPress has upgraded to Masonry v3, you may have to use an the iframe or Insert CSS/JS plugins to restore the older Masonry v2 if you rely on its features.

There are a number of competitors to Masonry including Shuffle [using bleeding edge Web technology – so it is complex to learn]; Isotope which adds sorting and filtering of blocks to Masonry and is very approachable; salvattore [also uses advanced CSS constructs for a basic 2, 3 or more column layout but not sorting and filtering as in Isotope]; and Packery which further extends Isotope and Masonry but as of this date is not ready for prime time.

Summary

Masonry has proved to a very popular front page creator. It has been added as an extension to popular Web Development environs as Bootstrap 3, WordPress, and Drupal among others. It works well with tools like FancyBox.js , video media, and sophisticated Ajax dynamic loading of Masonry blocks. But users should not defeat the beauty of |Masonry by using unwieldy blocks sizes,particularly blocks of poorly fitting widths. But more than ever, Masonry is built for portfolio and Splash pages which it serves very well.

Pin It on Pinterest