Packery Images grid

by DannyEnglander

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/2.1.0/jquery.imagesloaded.min.js"></script>
<div class="packery">
<div class="item">
    <img src="http://lorempixel.com/284/190/nature/" /></div>
 <div class="item">
    <img src="http://lorempixel.com/284/190/abstract/" /></div>
  <div class="item">
    <img src="http://lorempixel.com/284/190/sports/" /></div>
  <div class="item">
    <img src="http://lorempixel.com/284/190/technics/" /></div>
  <div class="item">
    <img src="http://lorempixel.com/284/190/transport/" /></div>
  <div class="item">
    <img src="http://lorempixel.com/284/190/city/" /></div>
  <div class="item">
    <img src="http://lorempixel.com/284/190/nature/" /></div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

.packery {
  max-width: 1170px;
}

/* clearfix */
.packery:after {
  content: ' ';
  display: block;
  clear: both;
}

.item {
  width: 25%;
  height: auto;
  float: left;
}

.item.gigante {
  width: 100%;
  height: 90px;
}

JavaScript

// http://packery.metafizzy.co/packery.pkgd.js added as external resource

docReady( function() {
  var container = document.querySelector('.packery');
  var pckry = new Packery( container );
  
// initialize Packery after all images have loaded
      imagesLoaded( container, function() {
        pckry = new Packery( container );
      });
  
  eventie.bind( container, 'click', function() {
    // don't proceed if item was not clicked on
    var target = event.target;
    if ( !classie.has( target, 'item' ) ) {
      return;
    }
  
    var isGigante = classie.has( target, 'gigante' );
    classie.toggleClass( target, 'gigante' );
  
    if ( isGigante ) {
      // if shrinking, just layout
      pckry.layout();
    } else {
      // if expanding, fit it
      pckry.fit( target );
    }
  });
});