砌体无限滚动重叠div

Question

这似乎是很多人都遇到过并且似乎能够解决的常见问题，但就我而言，似乎没有一个解决方案适合我。

页面加载完美，但在滚动和附加更多砖块时发生重叠。此外，这似乎只发生在我第一次登陆页面时。如果我在所有内容都已加载后刷新，则向下滚动时不会重叠。我认为 imagesLoaded 应该处理这个但不能正常工作。不知道我哪里出错了。

作为参考，这里是我遇到问题的页面：http://isaacprice.me/blog/

这是我的代码现在的样子：

<script>

  jQuery(function( $ ) {
        var $container = $('#all_posts');

        $container.imagesLoaded( function() {
         var $msnry = $container.masonry({
              columnWidth: 240,
              gutter: 20,
              itemSelector: '.item',
              "isFitWidth": true
          });
        });

        $container.infinitescroll(
        // trigger Masonry as a callback
        function( newElements ) {
          // hide new items while they are loading
          var $newElems = $( newElements ).hide();
          // ensure that images load before adding to masonry layout
          //$newElems.imagesLoaded(function(){

            // show elems now they're ready


            $msnry.append( $newElems ).delay(500).imagesLoaded(function() {
              $newElems.fadeIn();
              $container.isotope( 'appended', $newElems );
              //$msnry.append( $newElems ).masonry( 'appended', $newElems, true );
             //$container.masonry( 'appended', $newElems, true );
            });
          //});
        }
      );
    });
  </script>

从我注释掉的行中可以看出，我尝试了多种变体来防止元素重叠。没有运气。每次尝试写这篇文章时，我都会遇到同样的问题。

非常感谢任何帮助。

Answer 1

您的混合砖石和同位素。你最初是用砖石加载的，然后你用这样的无限滚动调用同位素：

    $msnry.append( $newElems ).delay(500).imagesLoaded(function() {
          $newElems.fadeIn();
            $container.isotope( 'appended', $newElems ); //WRONG!!
          //$msnry.append( $newElems ).masonry( 'appended', $newElems, true );
         //$container.masonry( 'appended', $newElems, true );

试试这个：

   $container.imagesLoaded(function() {
          $newElems.fadeIn();        
         $container.masonry( 'appended', $newElems, true );