Question

我使用下面的代码无限滚动使用砌体，但如果我快速滚动，则不会加载新内容，除非我向后滚动一点然后再向下滚动。

如果我慢慢滚动，它可以正常工作。

我主要使用航点的默认值无限滚动快捷方式，并通过“更多”链接从php加载数据。 php文件在每次调用时显示12个项目，然后是新的“更多”链接[除非没有更多数据]。

<script>
$( document ).ready(function() {

var container = $('.infinite-container');

// initialize Masonry after all images have loaded  
container.imagesLoaded( function() {
    container.masonry({
         itemSelector: '.infinite-item',
         transitionDuration: 0
    });
}); 

    $('.infinite-container').waypoint('infinite', {

    onAfterPageLoad: function() {
        $(container).masonry('reloadItems');
        $(container).imagesLoaded( function() {
          $(container).masonry('layout');
          });
    }
}); 

}); 
</script>

Answer 1

虽然不是路标问题的真正解决方案，但它是的解决方案。

我转而使用无限滚动插件，现在可以使用了。 https://github.com/paulirish/infinite-scroll

对现有代码所需的改动非常少，包装了当前的航路点＆＃34;更多＆＃34; page-nav div中的链接

这是新代码，以防其他人帮助。

$( document ).ready(function() {

    var $container = $('.infinite-container');
    // initialize Masonry after all images have loaded  
    $container.imagesLoaded( function() {
      $container.masonry({
             itemSelector: '.infinite-item',
             transitionDuration: 0,
             "isFitWidth": true
             //columnWidth: 200
        });
    }); 

    $container.infinitescroll({
      navSelector  : '#page-nav',    // selector for the paged navigation 
      nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
      itemSelector : '.infinite-item',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          msgText: '<em>loading...</em>',
          img: 'images/loading.gif'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );

});

航点无限滚动与砌体问题与快速滚动

1 个答案: