8 Popular jQuery Javascript Masonry Layout Plugins
1. Masonry
What is Masonry?
Masonry is a JavaScript grid layout library. It 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.
2 Isotope
Filter & sort magical layouts
See isotope.metafizzy.co for complete docs and demos.
Download
isotope.pkgd.js un-minified, or
isotope.pkgd.min.js minified
3. Bricklayer.js
Bricklayer is a Lightweight and Independent Pinterest-like Cascading Grid Layout Library
- Simpler than any other cascading grid layout tools.
- Lightweight, no fat. (1.5KB gzipped)
- No frameworks required.
- Responsive support with no glitches.
- Easy configuration.
- No inline styles, static positioning.
- Integrates with jQuery, Angular.js and React.js easily.
Demo: http://bricklayer.js.org
4.Freewall
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet…
What is Freewall?
Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts … with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
Some example layouts:
5.Justified Gallery
Justified Gallery is a JavaScript library that allows you to create an high quality justified gallery of images.
This is a common problem for people who create websites: you have a series of images to display, but you are not sure how to arrange them in an elegant way. Important websites such as 500px, Flickr, or Google display images in an excellent way, justifying them similarly to brick wall. Justified Gallery will give you the power to do that too.
Justified Gallery is a professional and open source library that even 500px, one of the best photography social network, chose for displaying their images!
6.zoomwall.js
A content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode
zoomwall.js is a content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode.
Visit ericleong.github.io/zoomwall.js for a demo.
7.ragrid
Intrinsic first auto-layout flexbox grid
8. Colcade
Masonry is great, but it has grown big as it has grown older. Colcade is designed to be small & fast. I recommend using Colcade over Masonry, but read over this feature comparison.
Same features
- Masonry grid layout
- Works as a jQuery plugin or with vanilla JS
- Initialize in HTML
Better features - Much smaller. 1/8 the size of Masonry
- Better fluid/responsive layout, using native browser positioning
- One file, no dependencies, no package dist built file
- Does not require imagesLoaded when using images
#javascript #jQuery
