Masonry and Infinite Scroll images overlap

Question

I'm using Masonry and Infinite Scroll on my site to load in content. However, whenever it gets to the point where Infinite Scroll loads in the new content, the images overlap with each other. I've tried everything I can think of with nothing working. Any ideas?

HTML

<div id="container" class="js-masonry infinite-scroll" data-masonry-options='{ "isFitWidth": true }'>
    {% paginate blog.articles by 20 %}
      {% for article in blog.articles %}
          <div class="item">
            <div class="overlay">
                    <a href="{{ article.url }}">{{ article.content }}</a>
                </div>
          </div>
      {% endfor %}

      {% if paginate.next %}
        <div class="more"><a href="{{ paginate.next.url }}">More</a></div>
      {% endif %}
    {% endpaginate %}       
</div>

JS

$(window).load(function(){
  var $container = $('#container');
  $container.infinitescroll({
    navSelector  : '.more',    // selector for the paged navigation 
    nextSelector : '.more a',  // selector for the NEXT link (to page 2)
    itemSelector : '.item',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/6RMhx.gif'
      }
    },
    // trigger Masonry as a callback
    function( newElements ) {
      var $newElems = $( newElements );
      $container.masonry( 'appended', $newElems, true );
        $container.masonry();
    }
  );
});