A lightweight script for creating a Pinterest-like grid using JQuery, pure javascript or YUI with image loaded
JavaScript
Latest commit f746c21 Nov 28, 2014 @hongkhanh Merge pull request #2 from jbeyers/master
Size container after adding grid items
Permalink
Failed to load latest commit information.
YUI optimize Oct 11, 2014
javascript Size container after adding grid items Nov 17, 2014
jquery optimize Oct 17, 2014
LICENSE Initial commit Sep 13, 2014
README.md Update README.md Oct 9, 2014
gridify.jquery.json add manifest Sep 17, 2014
screenshot.jpg screenshot Sep 13, 2014

README.md

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)

ScreenShot

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