Clonar contenido, añadir y anteponer - javascript, jquery, jquery-isotope

Estoy tratando de construir un pergamino infinito tanto hacia arriba como hacia abajo, utilizando el isotope plugin.

Pero estoy atascado una vez más después de obtener ayudaaquí en stackoverflow. Desafortunadamente, el contenido solo se clona una vez, pero mi intención es clonarlo y agregarlo / añadirlo cada vez que el usuario llegue al final o la parte superior de la página.

Soy nuevo en jQuery y realmente agradecería que me ayudara a solucionarlo.

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

Respuestas

Parece que estás tratando de hacer una scroll infinito. El complemento de isótopos es interoperable con el complemento de desplazamiento infinito, por lo que no debería tener ningún problema. Aquí hay un ejemplo que utiliza ambos esta página:

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


});