html - jQuery Masonry with InfiniteScroll -
i have problem adding infinite scroll masonry plugin. i'm trying add boxes html file. here's code:
var $container = $('#tiles');
$container.imagesloaded(function() { $container.masonry({ itemselector: '.item', columnwidth: 252, gutterwidth: 43 }); }); // infinite scroll $container.infinitescroll({ navselector: '#page-nav', // selector paged navigation nextselector: '#page-nav a', // selector next link (to page 2) itemselector: '.item', // selector items you'll retrieve loading: { finishedmsg: 'no more pages load.', img: 'http://i.imgur.com/6rmhx.gif' } }, // trigger masonry callback function(newelements) { // hide new items while loading var $newelems = $(newelements).css({opacity: 0}); // ensure images load before adding masonry layout $newelems.imagesloaded(function() { // show elems they're ready $newelems.animate({opacity: 1}); $container.masonry('appended', $newelems, true); }); } );
and <a>
link html file new boxes:
<div id="page-nav" style="display: none;"> <a href="pages/boxes.html"></a> </div>
the problem nothing happens when scroll down. console shows no errors. missing something?
you have not called scroll function when scrolled $(window).scroll(); called, find position of scroller , call infinite scroll function of masonry
try :
$(window).scroll(function(){ var mostofthewaydown = ($(document).height() - $(window).height()) * 9 / 10; if ($(window).scrolltop() >= mostofthewaydown){ $container.infinitescroll({ navselector: '#page-nav', // selector paged navigation nextselector: '#page-nav a', // selector next link (to page 2) itemselector: '.item', // selector items you'll retrieve loading: { finishedmsg: 'no more pages load.', img: 'http://i.imgur.com/6rmhx.gif' } }, // trigger masonry callback function(newelements) { // hide new items while loading var $newelems = $(newelements).css({opacity: 0}); // ensure images load before adding masonry layout $newelems.imagesloaded(function() { // show elems they're ready $newelems.animate({opacity: 1}); $container.masonry('appended', $newelems, true); }); } ); } });
Comments
Post a Comment