6

Infinite Scroll プラグインで Isotope プラグインを使用しています。デフォルト設定では、無限スクロールが自動的に新しい要素の読み込みをトリガーしますが、これは問題ありませんが、「もっと画像を読み込む」ボタンが必要です。

同位体INSERT関数に渡すことができる無限スクロールから新しい要素を取得する小さなコードが欠けているだけです。以下のコードのコメントを参照してください。

// 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.js後にインクルードし、プラグインを呼び出すときjquery.infinitescroll.jsに渡すことで動作を使用するようにinfinite scrollに指示し、 IsotopeのInfinite Scrollのデモにbehavior: 'twitter'示されているように、コールバックとしてIsotopeを呼び出すだけです。

$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 に答える