15 jQuery Plugins for Dynamic Grid Layouts

Today The Dynamic Grid is one of the hottest page layouts that lets you share your content in a painless and pretty fast way. It is so popular because it is used by Pinterest, a pinboard-style photo-sharing website. The dynamic grid is very similar to the float, with the only difference that it repositions and rearranges all the child elements next to one another.

If you are planning to create a dynamic grid layout like Pinterest, we’ve compiled a list of 15 great jQuery plugins that will allow you to organise your content on a web page. We hope that all of these plugins will help you finish your next project faster.

Let’s go through them one by one.

Freewall:

Freewall is a responsive and cross-browser jQuery plugin that lets you make different kinds of dynamic grid layouts, such as image-based, Pinterest-like, metro-style, flexible, and nested grids, using callback events and CSS3 animation effects.

It creates a virtual matrix which is based on the width (height) of a cell unit and the width (or height) of a container. It scans the matrix at each cell to make a gap by finding a free cell and then trying to fit a block element into that gap. It resizes the block if no block can fit into the free area.

S Gallery:

S Gallery is a responsive and touch-optimized jQuery gallery plugin that displays images using HTML5’s FullScreen API and CSS animations. It is inspired by Sony’s product gallery, which is made with Flash. You can use the keyboard or the previous-next button to move through the gallery that this plugin makes.

You can use keyboard shortcuts to navigate through the images or also view the gallery in full-screen mode. In addition, it’s possible to return to the grid view with a single click. The gallery plugin is also available for WordPress and has only two dependencies: jQuery and the stylesheet for the gallery.

Mason.js:

When using Isotope, Masonry, or another grid plugin, sometimes you may face a problem where your grid contains gaps or ragged edges. Mason was created to perfect such a grid by filling those gaps in. Once the grid is made, the plugin figures out where the gaps are and fills them by either copying the content or adding predefined elements.

You can use this amazing plugin to define the size of columns and rows, the sizes to be used for elements, what elements to use, breakpoints, an array of specific sized elements, gutters for elements and more.

jQuery.Shapeshift:

Shapeshift, inspired by the jQuery Masonry plugin, dynamically arranges a set of elements into a column grid system like Pinterest. What makes it different from other jQuery grid plugins is the ability to drag and drop items within the grid. The drag ‘n’ drop doesn’t affect the logical index position of any item.

Whenever Shapeshift is used, it always renders exactly the same grid as long as the child elements are in the same order. It also works with touch devices by using the included jQuery UI Touch Punch and comes with lots of options, including enabling/disabling drag-drops, on/off animation, show/hide index, setting the margins and much more.

jQuery Nested:

jQuery Nested is the best solution to generate a completely gap-free multi-column dynamic grid layout. It creates a matrix of all the elements and, after that, builds a multi-column grid. Then it finds out all the gaps in the matrix and re-orders the elements to fill them. It delivers a completely gap-free layout by resizing any element at the bottom of the grid that is bigger or smaller than the gap.

BlocksIt.js:

BlocksIt.js is one of the most popular jQuery plugins that allows you to create a dynamic grid layout like Pinterest, one of the hottest websites nowadays. It converts HTML elements into ‘blocks’ and places those blocks in a well-arranged grid layout. You can also combine two or more blocks into a big block element. It uses CSS absolute position property to re-position the selected elements.

It calculates the top and left positions of an element, which is based on criteria like placing the new block under the shortest block or starting the new block from left to right. It comes with several options that let you define the number of columns to be created, set margins, and target child elements, which will be converted into blocks.

Wookmark:

Wookmark, developed by Wookmark.com (a Pinterest alternative) is one of the best responsive jQuery plugins to showcase a large amount of content in a stylish and minimalistic manner. Once initialized, it detects the size of the browser window and automatically arranges the elements in a dynamic column grid. You can adjust a number of things like offset, outerOffset, flexibleWidth, itemWidth, container, resizeDelay, autoResize and more.

Grid-A-Licious:

Grid-A-Licious is a jQuery grid plugin that enables you to create simple, flexible grid layouts that work well on any type of device. Regardless of the device or screen size, the grid doesn’t use absolute positioning and fits perfectly, as it is floating and fluid. This plugin also has support for prepending/appending new items to the grid, which is very beneficial for dynamic layouts.

jPhotoGrid:

jPhotoGrid takes a simple list of captions and images and turns them into a cool image grid, which you can easily explore and zoom. It layouts the grid by floating the elements and then placing them in an absolute position. This is what enables the plugin to zoom in on a particular image and then return it to its position. This plugin uses the browser’s image scaling to zoom in on images, so the image can resize properly as both a thumbnail and a zoomed image.

Gridster:

Gridster, made by Ducksboard, is an amazing jQuery plugin that lets you build intuitive multi-column grids (like iGoogle), which you can drag ‘n’ drop and re-order. The only dependency for this plugin is jQuery and it doesn’t require jQuery UI. You can also add new elements and remove existing elements from the grid dynamically. It supports all the modern browsers like Safari, Chrome, Firefox, Opera, and Internet Explorer 9+ .

Photoset Grid:

Photoset Grid is a simple jQuery plugin that arranges photos into a flexible grid, based on Tumblr’s photoset feature. Previously, this plugin was built for the Style Hatch Tumblr themes, but later its developers released it for public use. This plugin comes with a number of customization options, like changing the width, manually setting a string, setting the pixel width, defining a function to be called and more. Using this plugin, you can create a basic photoset grid, add a lightbox and much more.

CollagePlus:

CollagePlus is a jQuery image gallery plugin that arranges your images with different CSS animations, so they can fit exactly into the container. You can define a target row height, give the images CSS borders and define the padding between images. This plugin works well whether you know or don’t know the size of the images you want to display.

Waterfall:

Very Similar to Wookmark, Waterfall is a powerful and customizable jQuery plugin that enables you to create dynamic and responsive layout like Pinterest, Huaban and Markzhi, which supports infinite Ajax scroll. It comes with dozens of options including custom max/min columns; fade in effect on loading, custom template, animated resize effect, infinite scrolling, support for fixed width and much more.

Freetile:

Freetile, inspired by similar plugins such as Wookmark and Masonry, organizes the content of a webpage in a responsive and dynamic layout. You can apply it to a container element, and then it’ll try to arrange its children in a dynamic layout. It’ll pack them all in a tight arrangement to make optimal use of screen space. All sizes of the elements can be packed, so there’s no need to define the width of a column according to the element size. It also features a smart animation routine that decides which element is meaningful to be animated and one that is not.

Packery:

Packery, inspired by Masonry, is a JavaScript layout library that fills empty gaps by using a bin-packing algorithm. Packery layouts can be organically wild and intelligently ordered. Elements can be fitted in an ideal spot, stamped in place or dragged around. It works on a container element with a set of same child items, while the sizing of items is done by CSS.