title: JQuery Masonry + InfiniteScroll: Overlapping issue after newly fetched items
body: <p>The title pretty much says it. I have a masonry image layout and want to dynamically load news contents with InfiniteScroll. Buch the new items get positioned in the top left corner again.</p>
  
  <p>Link: <a href="http://thomasmaier.me/2g12b/" rel="nofollow">http://thomasmaier.me/2g12b/</a></p>
  
  <p>It's a Wordpress installation and InfiniteScroll is a plugin while Masonry is hardcoded.</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="&lt;?php bloginfo('template_url'); ?&gt;/js/jquery.masonry.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  
    $(function(){
  
      var $container = $('#content');
  
      $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector: '.post'
        });
      });
  
      $container.infinitescroll({
        navSelector  : '.navigation',    // selector for the paged navigation 
        nextSelector : '.navigation .alignleft a',  // selector for the NEXT link (to page 2)
        itemSelector : '.post'
        },
        function( newElements ) {
          var $newElems = $( newElements ).css({ opacity: 0 });
          $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            $container.masonry( 'appended', $newElems, isAnimatedFromBottom ); 
          });
        }
      );
  
    });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I tried everything I could, searched here, looked at the Help section here <a href="http://masonry.desandro.com/demos/infinite-scroll.html" rel="nofollow">http://masonry.desandro.com/demos/infinite-scroll.html</a> but it doesn't work.</p>
  
  <p>Can you help me out?</p>