Клонирование содержимого, добавление и добавление

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


});