10 Best jQuery/JavaScript Masonry Layout Plugins
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.
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.
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 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.
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.
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 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.
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.
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.
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.
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.
