Create A Pinterest-Like Dynamic Grid Using jQuery Gridify Plugin

Create A Pinterest-Like Dynamic Grid Using jQuery Gridify Plugin
File Size: 400 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

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.