imagesLoaded & Masonry

using $.fn.imagesLoaded plugin http://gist.github.com/797120

by salt

HTML

<script src="http://github.com/desandro/masonry/raw/master/jquery.masonry.min.js"></script>
<script src="http://gist.github.com/raw/797120/c75b3447719c817f8f213fef23eb2836f1518acc/gistfile1.js"></script>
<script src="$.fn.imagesLoaded = function(callback){   var elems = this.filter(&#39;img&#39;),       len = elems.length;          elems.bind(&#39;load&#39;,function(){       if (--len &lt;= 0){ callback.call(elems,this); }   }).each(function(){      // cached images don&#39;t fire load some"></script>
  <div id="container" class="photos clearfix"> 
    
      <div class="photo"> 
        <a href="http://www.flickr.com/photos/nemoorange/5013039951/" title="Stanley by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4113/5013039951_3a47ccd509.jpg" alt="Stanley" /></a> 
      </div> 
    
      <div class="photo"> 
        <a href="http://www.flickr.com/photos/nemoorange/5013039885/" title="Officer by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4131/5013039885_0d16ac87bc.jpg" alt="Officer" /></a> 
      </div> 
    
      <div class="photo"> 
        <a href="http://www.flickr.com/photos/nemoorange/5013039583/" title="Tony by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4086/5013039583_26717f6e89.jpg" alt="Tony" /></a> 
      </div> 
    
      <div class="photo"> 
        <a href="http://www.flickr.com/photos/nemoorange/5013646070/" title="Kendra by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4146/5013646070_f1f44b1939.jpg" alt="Kendra" /></a> 
      </div> 
    
      <div class="photo"> 
        <a href="http://www.flickr.com/photos/nemoorange/5013039541/" title="Giraffe by Dave DeSandro, on Flickr"><img src="http://farm5.static.flickr.com/4144/5013039541_17f2579e33.jpg" alt="Giraffe" /></a> 
      </div> 
    
      <div class="photo"> 
        <a href="http://www.flickr.com/photos/nemoorange/5013039741/" title="Gavin by Dave DeSandro, on Flickr"><img...

CSS

.photos .photo {
  width: 130px;
  margin: 5px;
  float: left;
}

.photos .photo img {
  display: block;
  width: 100%;
}

JavaScript

$(function(){
    
    $.fn.imagesLoaded = function(callback){
  var elems = this.find('img'),
      len = elems.length;
      console.log(len)
  elems.bind('load',function(){
      if (--len <= 0){ callback.call(elems,this); }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
     if (this.complete || this.complete === undefined){
        var src = this.src;
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        this.src = src;
     }
  });

  return this;
};

    var $container = $('#container');
    $container.imagesLoaded( function() {
        $container.masonry();
    });
    
    
});