estuve investigando diversos codigos con los cuales mantener el masonry, y al final di con este:
Código PHP:
$(function(){
// selecciono el contenedor
var $container = $("#cont");
// esto oculta los items mientras cargan las imagenes
var $it = $(".msry");
var $items = $it.css({ opacity: 0 });
// inicio masonry al cargar las imagenes
$container.imagesLoaded(function(){
$items.animate({ opacity: 1 });
$container.masonry({
itemSelector: ".msry"
});
});
$container.infinitescroll({
navSelector : "#cont .nav", // esto mediante la paginacion trae los items dela siguiente pagina
nextSelector : "#nav .next",
itemSelector : "#cont .ipost",
loading: {
finishedMsg: "No more pages to load.",
img: "http://i.imgur.com/6RMhx.gif"
}
},
// anexo los nuevos items a masonry
function( newElements ) {
// oculto los items mientras cargan las imagenes
var $newElems = $( newElements ).css({ opacity: 0 }); // al cargar las imagenes se muestran los nuevos items y asi sucesivamente
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry("appended", $newElems, true);
});
});
});
en teoria deberia funcionar al completo, pero solo funciona la primera parte, es decir el masonry.
la pagina muestra inicialmente 10 items y el enlace que tengo en la paginacion es una varible php enviada por get, asi:
?mas=2
al recibirla la multiplico por 10 y le resto 10 y mediante limit 10,10 pro ejemplo hago que me muestre los siguientes 10 items para que el codigo los capture.
he intentado de to y no hago que funcione bien, podrian ayudarme?