10 Best jQuery/JavaScript Masonry Layout Plugins

by jQueryScript,

The Masonry layout is a modern grid layout system that dynamically places grid items with different sizes in a responsive, fluid, vertical layout as you see on Pinterest.com.

In this article, I'd like to introduce the 10 best jQuery or vanilla JavaScript plugins that help web developers to quickly implement the Masonry Layout on the next web/mobile project.

Table of contents:

jQuery Masonry Layout Plugins:

Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid

Yet another small jQuery plugin to create famous Pinterest-like responsive & fluid web grid for your website layout. Worked with Bootstrap 3 framework.

Simple jQuery Plugin To Create Pinterest Style Grid Layout - Pinterest Grid

[Demo] [Download]


Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark

Wookmark is a jQuery Plugin that lays out a series of elements in a dynamic column grid.

Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark

[Demo] [Download]


Responsive jQuery Dynamic Grid Layouts Plugin - Freewall

Freewall is a responsive and cross-browser jQuery plugin for creating dynamic grid layouts for desktop, mobile and tablet.

Responsive jQuery Dynamic Grid Layouts Plugin - Freewall

[Demo] [Download]


Responsive Masonry-style Gallery Plugin With jQuery And Bootstrap - mp-mansory.js

mp-mansory.js is a lightweight jQuery plugin used for creating a responsive, fluid, Masonry- and Pinterest-style grid layout / gallery using Bootstrap's grid system.

Responsive Masonry-style Gallery Plugin With jQuery And Bootstrap - mp-mansory.js

[Demo] [Download]


Yet Another Pinterest Like Layout Plugin For jQuery - waterfall

waterfall is a powerful and pretty jQuery plugin for creating dynamic and responsive Pinterest like layout which supports infinite ajax scroll.

Yet Another Pinterest Like Layout Plugin For jQuery - waterfall

[Demo] [Download]


Vanilla JavaScript Masonry Layout Plugins:

Lightweight Masonry-like Grid Layout Library – Bricklayer

Bricklayer is a JavaScript library for generating a responsive, dynamic, Masonry- and Pinterest-like cascading grid layout for your web project.

Lightweight Masonry-like Grid Layout Library – Bricklayer

[Demo] [Download]


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.

Lightweight Masonry Layout Library – Macy.js

[Demo] [Download]


Tiny Masonry-like JavaScript Grid Library – tiny-masonry.js

tiny-masonry.js is a minimalist JavaScript library that makes it easy to create Masonry-like responsive, neat, fluid grid layout for your web project.

Tiny Masonry-like JavaScript Grid Library – tiny-masonry.js

[Demo] [Download]


Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

MiniMasonry.js is a lightweight (~3kb) JavaScript library to create a responsive, fluid, Masonry-style grid layout for modern web design.

Minimal Masonry Web Layout In Pure JavaScript – MiniMasonry.js

[Demo] [Download]


Filterable Masonry Grid In JavaScript – sortableJs

sortableJs is a lightweight and easy-to-use JavaScript plugin to filter through a set of grid items with a subtle shuffle effect.

Filterable Masonry Grid In JavaScript – sortableJs

[Demo] [Download]


Bonus: Pure CSS Masonry Layout:

Minimalist Masonry-like CSS Grid Layout

A simplest pure CSS implementation of the Masonry- and Pinterest-like responsive grid layout.

Minimalist Masonry-like CSS Grid Layout

[Demo] [Download]