Masonry iteratively reveal items

load masonry image after image and append

by Michael Schmidt

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.js"></script>
<h1>Masonry + imagesLoaded, iteratively reveal items</h1>
<div id="container"></div>
<div id="images">
  <div class="item"><img src="http://lorempixel.com/425/299/nature"></div>
  <div class="item"><img src="http://lorempixel.com/190/292/nature"></div>
  <div class="item"><img src="http://lorempixel.com/520/329/nature"></div>
  <div class="item"><img src="http://lorempixel.com/404/176/nature"></div>
  <div class="item"><img src="http://lorempixel.com/530/290/nature"></div>
  <div class="item"><img src="http://lorempixel.com/228/200/nature"></div>
  <div class="item"><img src="http://lorempixel.com/207/316/nature"></div>
  <div class="item"><img src="http://lorempixel.com/435/162/nature"></div>
  <div class="item"><img src="http://lorempixel.com/376/175/nature"></div>
  <div class="item"><img src="http://lorempixel.com/508/338/nature"></div>
  <div class="item"><img src="http://lorempixel.com/404/389/nature"></div>
  <div class="item"><img src="http://lorempixel.com/216/304/nature"></div>
</div>
<p><button id="load-images">Load images</button></p>

CSS

body { font-family: sans-serif; }

#container {
  background: #DDD;
  max-width: 1000px;
}

.item {
  width: 200px;
  float: left;
}

.item img {
  display: block;
  width: 100%;
}

button { font-size: 18px; }

JavaScript

$( function() {

  var $container = $('#container').masonry({
    itemSelector: '.item',
    columnWidth: 200
  });
    
  // reveal initial images
  $container.masonryImagesReveal( $('#images').find('.item') );
});

$.fn.masonryImagesReveal = function( $items ) {
  var msnry = this.data('masonry');
  var itemSelector = msnry.options.itemSelector;
  // hide by default
  $items.hide();
  // append to container
  this.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents( itemSelector );
    // un-hide item
   $item.show();
    // masonry does its thing
    msnry.appended( $item );
  });
  
  return this;
};