masonry-layout

What is masonry-layout?

The masonry-layout npm package is a JavaScript library for creating dynamic, grid-based layouts. It arranges elements vertically, positioning each element in the next open spot in the grid, much like a mason fitting stones in a wall. This layout is often used for image galleries, portfolios, and other content-heavy websites.

What are masonry-layout's main functionalities?

Basic Grid Layout

This feature allows you to create a basic grid layout. The code initializes a Masonry instance on a container element with the class 'grid' and specifies the item selector and column width.

const Masonry = require('masonry-layout');

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200
});

Responsive Layout

This feature enables a responsive layout. The code uses a grid-sizer element to define column width and sets percentPosition to true for percentage-based positioning.

const Masonry = require('masonry-layout');

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

Adding Items Dynamically

This feature allows you to add items dynamically to the grid. The code creates a new grid item, appends it to the grid, and then informs Masonry about the new item using the appended method.

const Masonry = require('masonry-layout');

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200
});

const newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
msnry.appended(newItem);

Other packages similar to masonry-layout

isotope-layout

Isotope is a JavaScript library for creating dynamic, filterable, and sortable grid layouts. It offers more advanced features compared to masonry-layout, such as filtering and sorting of grid items. It is also more customizable and has a larger community and more extensive documentation.

packery

Packery is another grid layout library that offers a more flexible and customizable layout compared to masonry-layout. It allows for draggable and resizable grid items, making it suitable for more interactive and complex layouts.

muuri

Muuri is a versatile grid layout library that combines the features of Masonry, Packery, and Isotope. It offers drag-and-drop, filtering, sorting, and responsive layouts. Muuri is highly customizable and provides a comprehensive API for advanced use cases.

README

Masonry

Cascading grid layout library

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

See masonry.desandro.com for complete docs and demos.

Install

Download

• masonry.pkgd.js un-minified, or
• masonry.pkgd.min.js minified

CDN

Link directly to Masonry files on cdnjs.

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

Package managers

Bower: bower install masonry --save

npm: npm install masonry-layout --save

Initialize

With jQuery

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

With vanilla JavaScript

// vanilla JS
var grid = document.querySelector('.grid');
var msnry = new Masonry( grid, {
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

With HTML

Add a class of js-masonry to your element. Options can be set in JSON in data-masonry-options.

<div class="grid js-masonry"
  data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

License

Masonry is released under the MIT license. Have at it.

---

Copyright 2015 David DeSandro