title: Masonry images overlapping
body: <p>so I'm working on my Tumblr Theme right now. I'm using Masonry to have all my posts in a 5-column grid and the infinite scroll script to load new images into the grid when I'm scrolling down. Unfortunately, most of the time as I scroll down images are overlapping. I figured out that the problem may be Masonry triggering before the images are loaded, but right now I have no idea how to fix this. I'm already using (window).load instead of (document).ready but the pictures keep overlapping nonetheless. Here's the full code snippet:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://static.tumblr.com/imovwvl/rSGl20lfv/masonry.js"&gt;
  &lt;/script&gt;
  &lt;script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"&gt;&lt;/script&gt;
  &lt;script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  
  $(window).load(function () {
  $('.posts').masonry(),
  $('.masonryWrap').infinitescroll({
  navSelector : "div#navigation",
  // selector for the paged navigation (it will be hidden)
  nextSelector : "div#navigation a#nextPage",
  // selector for the NEXT link (to page 2)
  itemSelector : ".entry",
  // selector for all items you'll retrieve
  bufferPx : 10000,
  extraScrollPx: 11000,
  loadingImg : "",
  loadingText : "&lt;em&gt;&lt;/em&gt;",
  },
  // call masonry as a callback.
  function() { $('.posts').masonry({ appendedContent: $(this) }); }
  );
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;$(window).load(function(){$("p").remove(":contains('Source:')");});&lt;/script&gt;
  </code></pre>
  
  <p>Does anyone have an idea on how to get it working? Any help would be appreciated!</p>