附加到网格时砌体项目重叠

Question

我在 Shopify 网站上使用 Masonry 和 Infinite Scroll 来加载内容，但是当新项目附加到 Masonry 网格时，它们会与预先存在的内容重叠。我不确定如何解决这个问题。

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>

jQuery

$(window).load(function(){
  var $container = $('#container');
  $container.masonry();
  $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 );
        $container.masonry();
    }
  );
});

Answer 1

根据 masonry 文档 (http://codepen.io/desandro/pen/kwALv) 中的示例，尝试像这样修改您的回调：

// trigger Masonry as a callback
function( newElements ) {
  // assuming "newElements" is an array of DOM elements
  //var $newElems = $( newElements ); // shouldn't need a jquery wrapper
  $container.append(newElements).masonry( 'appended', newElements );
    //$container.masonry(); // shouldn't need this line
}