Javascript 砖石无限卷轴重叠div

这似乎是许多人都遇到过的一个普遍问题，而且似乎能够解决，但就我而言，没有一个解决方案对我有效

页面加载完美，但在滚动和添加更多砖块时会发生重叠。而且，这似乎只有在我第一次登陆页面时才会发生。如果我在所有内容都已加载后刷新，则向下滚动时没有重叠。我以为imagesLoaded应该处理这个但不能用atm机。不知道我哪里出错了

作为参考，以下是我遇到问题的页面：

下面是我的代码现在的样子：

<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>

正如您从我注释的行中所看到的，我尝试了多种变体来防止元素重叠。不走运。我写这篇文章的每一种方式都得到了同样的问题

---

非常感谢您的帮助。

您的混合砖石和同位素。您首先使用砌体加载，然后使用infinitescroll调用同位素，如下所示：

    $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 );

---

感谢@Macsupport的回复。不幸的是，我已经尝试了同样的目的。事实上，您可以在$container.com调用下面的注释行中看到，我已经尝试过了。当我注释掉这行时：$container.isotox'added'，$newElems；并取消对行的注释：$container.massy'added'，$newElems，true；我仍然得到同样的结果，它们不能互换使用。你的网站上有massy.js，所以你需要使用它，而不是调用。另外，您还加载了其他代码，mashine-isotox.js，它需要在mashine之后而不是之前加载。您需要显示更多的代码。做一个jsfiddle。忘记我甚至使用了对同位素的调用。最初，这甚至不是我代码的一部分。正如我所说，即使使用$container.mashise而不是$container.isotox，它也根本不起作用；当我有时间的时候我会拉小提琴，但我不认为这是问题所在。还有，这就是我所有的代码。您还需要什么代码？HTML？我还链接到了我遇到问题的在线页面。所有的代码都在那里。谢谢你的帮助。