Masonry & LazyLoad doesn't want to work together

I made your 5.html work by using the javascript files of the fiddle present on the SO link you posted, answered by Nathan Do. So you probably just had bad versions of the scripts.

The scripts linked on that page are: http://cdn.jsdelivr.net/masonry/2.1.08/jquery.masonry.min.js and http://cdn.jsdelivr.net/jquery.lazyload/1.8.4/jquery.lazyload.js

Here's your original fiddle updated with that page's method: http://jsfiddle.net/L9RLe/

In your case, though you are creating masonry and adding lazyload effect, the images get overlapped.

You need to follow steps as :

1. Create Dynamic HTML structure for images along with their respective aspect ratio height and width. Note: images should have the required attributes for applying lazy load effect i.e. class="lazy" data-original="actual image url" and src="dummy imageurl".

2. Apply lazy load effect.

3. Then create Masonry.

Lets have an example :

Suppose I am having a javascript array with some image related data as,

var gallery_itemList= [    {url: "images/example1.jpg", width:"1170", height:"460"},    {url: "images/example2.jpg", width:"800", height:"320"},    {url: "images/example3.jpg", width:"1200", height:"870"}];

And below prototype for creating dynamic html, applying lazyload effect and creating Masonry effect as :

var masonryGallery = {    gallery :'', // gallery to create    genarateGallery : function() {      // generate each item html      var inHTML="", i;      for(i=0;i<gallery_itemList.length;i++){        var iWidth, iHeight, fHeight=0;        iWidth=parseInt(gallery_itemList[i].width);        iHeight=parseInt(gallery_itemList[i].height);        fHeight = Math.round((iHeight*300)/iWidth);        inHTML+='<div class="item" style="height:'+fHeight+'px">';        inHTML+='<img class="lazy" src="images/loading.gif" data-original="'+gallery_itemList[i].url+'"/>';        inHTML+='</div>';         }      //add generated html to gallery      $(masonryGallery.gallery).append(inHTML);           },    applyLazyload : function(){      $("img.lazy").lazyload();    },    createMasonry : function(){      // create Masonry      $(masonryGallery.gallery).masonry({        columnWidth: 350,        itemSelector: '.item',        isFitWidth: true,        isAnimated: !Modernizr.csstransitions      }).imagesLoaded(function() {        $(this).masonry('reload');      });    },    init : function(givenGallery) {        masonryGallery.gallery = givenGallery; // set gallery         masonryGallery.genarateGallery(); // generate gallery html        masonryGallery.applyLazyload();  // apply lazyload effect        masonryGallery.createMasonry();  // apply masonry effect    }};/* Gallery Intialisation */(function(){masonryGallery.init('div#content');})(); 

If you have the problem images get overlapped, I found the solution at the site below, although it is in Japanese.

http://www.webdesignleaves.com/wp/jquery/1340/

The point is use following;

$('img.lazy').load(function(){ ... })

HTML

<div id="works_list"><div class="work_item">    <img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">    <p>title 1</p>  </div><!-- end of .work_item--><div class="work_item">    <img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">    <p>title 2</p>  </div><!-- end of .work_item-->     ....</div><!-- end of #works_list -->    

jQuery

$("img.lazy").lazyload({    effect: 'fadeIn',    effectspeed: 1000,    threshold: 200});$('img.lazy').load(function() {    masonry_update();});function masonry_update() {         var $works_list = $('#works_list');    $works_list.imagesLoaded(function(){        $works_list.masonry({            itemSelector: '.work_item',　            isFitWidth: true,　            columnWidth: 160        });    }); }