Create A Pinterest-Like Dynamic Grid Using jQuery Gridify Plugin

Gridify is a minimal jQuery/YUI plugin used to create a Pinterest-like flexible and dynamic grid out with support of CSS3 animations and image loaded event. Also provides a standalone JS library which allows you to create the Pinterest-like grid layout with pure Javascript.

Related Plugins:

• Pinterest Like Glowing Input Fields with CSS3
• Yet Another Pinterest Like Layout Plugin For jQuery - waterfall
• Pinterest-Like Dynamic & Responsive Grid Layout Plugin - BlocksIt
• Pinterest-Like Dynamic Grid Layout Plugin with jQuery - Wookmark
• Pinterest-Like Web Layout Plugin
• Pinterest Style Dynamic Layout jQuery Plugin - Masonry
• Simple Pinterest Like Grid Layout Plugin - Pinbox
• Super Tiny Pinterest Dynamic Grid Layout Plugin with jQuery - Pubu
• Tiny Pinterest Like Image Grid Layout Plugin - Mosaic Flow

Basic Usage:

1. Include the jQuery library and the jQuery Gridify plugin at the bottom of your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../gridify.js"></script>

2. Insert a group of images into your document.

<div class="grid">
  <img src="1.jpg" width="250">
  <img src="2.jpg" width="250">
  <img src="3.jpg" width="250">
  ...
</div>

3. Call the plugin on the parent container and set the options for your grid layout.

$(window).load(function() {
var options =
{
  srcNode: 'img', // grid items (class, node)
  margin: '20px', // margin in pixel, default: 0px
  width: '250px', // grid item width in pixel, default: 220px
  max_width: '',  // dynamic gird item width if specified, (pixel)
  resizable: true,// re-layout if window resize
  transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease
}
$('.grid').gridify(options);
});

Change log:

2014-10-17

• optimize

2014-10-11

• optimize

2014-10-09

• fix animation

2014-10-08

• Update gridify.js

About Author:

Author: Nguyen Hong Khanh

Website: https://github.com/hongkhanh/gridify

---

This awesome jQuery plugin is developed by hongkhanh. For more Advanced Usages, please check the demo page or visit the official website.