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

你的混合砖石和同位素。您最初使用砖石装载，然后使用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 );

Masonry Infinite Scroll重叠div

1 个答案: