jQuery

【jQuery】Pinterestのようなグリッドを作成するための軽量なスクリプトGridify

December 25, 2016
Gridify

GridifyはロードされたイメージとjQueryの、純粋なjavascriptやYUIを使用して、Pinterestのようなグリッドを作成するための軽量なスクリプト。

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);
 }

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);
     }
 );

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);
 })

MIT