Create A Pinterest-Like Dynamic Grid Using jQuery Gridify Plugin

File Size: 400 KB
Views Total: 7833
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

Basic Usage:

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

<script src="//"></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">

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

Change log:


  • optimize


  • optimize


  • fix animation


About Author:

Author: Nguyen Hong Khanh


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