克隆內容，附加和預計

Question

我正在嘗試使用isotope plugin向上和向下都構建無限滾動。

但是我再次卡住之後得到一些幫助在這裏stackoverflow。不幸的是，內容只能克隆一次，但我的目的是在用戶每次到達頁面底部或頂部時立即克隆和追加/預先添加內容。

我是jQuery的新手，我真的很感激你能幫我調試它。

http://jsfiddle.net/sqJqr/7/

$(document).ready(function() { 
    var $newElements = $(".isotope").first().children().clone(); 
    $(window).scroll(function() { 
     if ($(window).scrollTop() >= ($('body').height() - $(window).height())) { 
     $(".isotope").append($newElements).isotope('appended', $newElements); 
     $isotope = $(".isotope").first().children().clone(); 
     } 
     else if ($(window).scrollTop() == 1) { 
     $(".isotope").prepend($newElements).isotope('reloadItems').isotope({ sortBy: 'original-order' }); 
     $isotope = $(".isotope").first().children().clone(); 
     }  
     return false; 
    }); 
}); 

Answer 1

這聽起來像你正在嘗試做的infinite scroll。同位素插件可以與無限滾動插件互操作，所以你不應該有問題。這裏是一個例子，使用從this頁面：

$(function(){ 

     var $container = $('#container'); 

     $container.isotope({ 
     itemSelector : '.element' 
     }); 

     $container.infinitescroll({ 
     navSelector : '#page_nav', // selector for the paged navigation 
     nextSelector : '#page_nav a', // selector for the NEXT link (to page 2) 
     itemSelector : '.element',  // selector for all items you'll retrieve 
     loading: { 
      finishedMsg: 'No more pages to load.', 
      img: 'http://i.imgur.com/qkKy8.gif' 
      } 
     }, 
     // call Isotope as a callback 
     function(newElements) { 
      $container.isotope('appended', $(newElements)); 
     } 
    ); 


});