6

我正在使用带有 Infinite Scroll 插件的 Isotope 插件。使用默认设置无限滚动会自动触发加载新元素,这很好,但是,我宁愿有一个按钮“加载更多图像”。

我只缺少一小段代码,它将从无限滚动中获取新元素,我可以将其传递给同位素插入函数。请在下面的代码中查看我的评论:

// initialize infinite scroll
$container.infinitescroll({
    navSelector  : '#paging',    // selector for the paged navigation 
    nextSelector : '#paging a',  // selector for the NEXT link (to page 2)
    itemSelector : '.col',     // selector for all items you'll retrieve
    loading: {
        msgText: 'Loading...',
        finishedMsg: Loaded all!',
             }
    } // <-- NOTE that we do not use callback function here!
    );


$(window).unbind('.infscr'); 

$('#paging a').click(function(){

// NEED CODE HERE TO GET NEW ELEMENTS FROM INFINITE SCROLL AND PASS THOSE ELEMENTS TO $container.isotope('insert', $(newElements)); 

}); 
4

1 回答 1

6

无限滚动插件实际上提供了一种“手动触发”行为来做你所追求的。

包括manual-trigger.jsafter jquery.infinitescroll.js,在调用插件时通过传递来告诉无限滚动使用该行为behavior: 'twitter',然后只需调用 Isotope 作为回调,如Isotope 的 Infinite Scroll 演示中所示:

$container.infinitescroll({
  navSelector  : '#paging',
  nextSelector : '#paging a',
  itemSelector : '.col',
  behavior: 'twitter',
  loading: {
      msgText: 'Loading...',
      finishedMsg: 'Loaded all!'
    }
  },
  // call Isotope as a callback
  function( newElements ) {
    $container.isotope( 'appended', $( newElements ) ); 
  }
);
于 2012-09-14T00:22:45.743 回答