Question

我在向砌体插件添加无限滚动时遇到问题。我想要做的是从html文件添加框。这是我的代码：

var $ container = $（'＃tiles'）;

$container.imagesLoaded(function() {
    $container.masonry({
        itemSelector: '.item',
        columnWidth: 252,
        gutterWidth: 43
    });
});

// Infinite Scroll
$container.infinitescroll({
    navSelector: '#page-nav', // selector for the paged navigation 
    nextSelector: '#page-nav 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) {
    // 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);
    });
}
);

和<a>以及带有新框的html文件的链接：

<div id="page-nav" style="display: none;">
                <a href="pages/boxes.html"></a>
            </div>

问题是当我向下滚动时没有任何反应。控制台显示没有错误。我错过了什么吗？

Answer 1

滚动时，你没有调用滚动功能$（window）.scroll（）;调用，然后找到滚动条的位置，然后调用砌体的无限滚动功能

试试这个：

$(window).scroll(function(){
    var mostOfTheWayDown = ($(document).height() - $(window).height()) * 9 / 10;   
    if ($(window).scrollTop() >= mostOfTheWayDown){
       $container.infinitescroll({
            navSelector: '#page-nav', // selector for the paged navigation 
            nextSelector: '#page-nav 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) {
         // 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);
      });
       }
     ); 
  }
});

带有InfiniteScroll的jQuery Masonry

1 个答案: