gridify.js

A lightweight script for creating a Pinterest-like grid using JQuery, pure javascript or YUI with image loaded

Features

• support images loaded event
• support window resize event
• support very long height item
• support dynamic item width
• support animation (CSS3 transition)

Usage

Pure javascript

 window.onload = 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
      }
      document.querySelector('.grid').gridify(options);
 }

Demo

Jquery plugin

 $(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);
 });
 
 // use with requirejs (new feature added on 9 Oct 2014)
 require.config({
     paths: {
         jquery: 'jquery-1.11.1.min',
         gridify: 'gridify'
     }
 });
 require( ["jquery", "gridify"],
     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);
     }
 );

Demo

YUI plugin

 YUI().use('node', 'gridify', function(Y){
      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
      }
      Y.one('.grid').gridify(options);
 })

Demo