PSD to HTML Blog

15 Remarkable jQuery Plugins to Create Dynamic Grid Layouts

Today Dynamic grid is one of the hottest page layouts that let 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. Dynamic grid is very similar to 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, here we’ve compiled a list of 15 great jQuery plugins that will allow you to organize your content on a web page. We hope all these plugins will reduce your development time while creating your next project.

Let’s go through them one by one.

Freewall:

Freewall

Freewall is a responsive and cross-browser compatible jQuery Plugin that allows you to create different types of dynamic grid layouts (including images, Pinterest like, metro style, flexible and nested grid) 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 around and then try to fit a block element into that gap. It resizes the block, if no block can fit the free area.

S Gallery:

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 from the Sony’s product gallery, which is made with Flash. The gallery created with this plugin is accessible via keyboard or with previous-next button.

You can use keyboard shortcuts to navigate through the images or also view the gallery in the full screen mode. In addition, it’s possible to return back 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:

Mason

When using Isotope, Masonry or another grid plugin, sometimes you may face a problem that your grid contains gaps or ragged edges. Mason is created to perfect such grid by filling those gaps in. Once the grid is created, the plugin calculates the gaps and fills them either by duplicating the content or with predefined elements.

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

jQuery.Shapeshift:

jQuery-Shapeshift

Shapeshift, inspired by the jQuery Masonry plugin, dynamically arrange 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 enable/disable drag-drops, on/off animation, show/hide index, set the margins and much more.

jQuery Nested:

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 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, which is bigger or smaller than the gap.

BlocksIt.js:

BlocksIt

BlocksIt.js is one of the most popular jQuery plugin that allows you to create a dynamic grid layout like Pinterest, one of the hottest websites nowadays. It converts HTML elements into ‘blocks’ and place 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 place the new block under shortest block or start 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

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

Grid-A-Licious is a jQuery grid plugin that enables you create simple flexible grid layouts, which 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. Packed with different customization options like defining gutter, width, selector and animation (like a queue, speed, duration, complete and effect), this plugin also have support for prepending/appending new items to the grid, which is very beneficial for dynamic layouts.

jPhotoGrid:

jPhotoGrid

jPhotoGrid takes a simple list of captions and images and turns it into a cool image grid, which you can easily explore and zoom. It layouts the grid by floating the elements and then place them at 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

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

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

CollagePlus is a jQuery image gallery plugin that arranges your images with different CSS animations, so they can fit exactly in 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 images you want to display.

Waterfall:

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

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

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.



About Author

ajeet

Ajeet Yadav is an expert commentator who’s allied with SeoSemanticXhtml, which is a sister concern of Ipraxa – a web agency that’s created its niche in providing high end PSD to HTML and Integration with third party applications such as PSD to Magento, WordPress, Drupal, Joomla etc. For the latest in Web designing and Web development, touch base with us via Facebook and Twitter also or you can follow us on Google+.