Skip to content

hongkhanh/gridify

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
YUI
Oct 11, 2014
Oct 17, 2014
Sep 13, 2014
Sep 13, 2014

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published