0

メーソンリー プラグインに無限スクロールを追加すると問題が発生します。私がやろうとしているのは、htmlファイルからボックスを追加することです。これが私のコードです：

var $container = $('#タイル');

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

新しいボックスを含むhtml<a>ファイルへのリンク:

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

問題は、下にスクロールしても何も起こらないことです。コンソールにエラーは表示されません。何か不足していますか？

4

1 に答える 1

0

$(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);
      });
       }
     ); 
  }
});
于 2013-05-09T11:20:29.630 に答える