Lightweight Masonry Layout Library – Macy.js

Category: Javascript , Layout , Recommended | August 17, 2017
Author: bigbitecreative
Views Total: 384
Official Page: Go to website
Last Update: August 17, 2017
License: MIT


Lightweight Masonry Layout Library – Macy.js


Macy.js is a lightweight, standalone JavaScript library for creating a Masonry- and Pinterest-like grid layout that displays images in dynamic, responsive vertical columns.

Install the Macy.js:

# Yarn
yarn add macy

$ npm install macy

# Bower
$ bower install macy

Basic usage:

Include the main stylesheet ‘macy.css’ in the header of the webpage.

<link rel="stylesheet" href="assets/css/macy.css">

Include the minified version of the Macy.js library at the bottom of the webpage.

<script src="assets/js/macy.min.js"></script>

Add your images to the masonry layout as these:

<div id="my-macy-container">
  <div class="demo"><img src="1.jpg" alt=""></div>
  <div class="demo"><img src="2.jpg" alt=""></div>
  <div class="demo"><img src="3.jpg" alt=""></div>
  <div class="demo"><img src="4.jpg" alt=""></div>
  <div class="demo"><img src="5.jpg" alt=""></div>

Initialize the Macy.js library with some options.

  container: '#my-macy-container'

Specify the number of columns to be displayed on different screen resolutions.

  container: '#my-macy-container',
  columns: 6, // default
  breakAt: {
    1200: 5,
    940: 3,
    520: 2,
    400: 1

More configuration options with default values.


  // space between images
  margin: 2,

  // false = prioritise equalising the height of each column over the order of the items themselves.
  trueOrder: true,

  // renders the layout after images are completely loaded
  waitForImages: false


API methods.

// recalculates the entire layout

// do something each time and image loads or after all images have been loaded
macyInstance.runOnImageLoad(function () {
}, true);

// removes the layout

// re-init the layout