<!--vòng lặp -->
<div id="container">
<div class="box">
<p>Nội dung vòng lặp tùy loại code mà nó khác nhau</p>
</div>
...
</div>
<!-- /hết vòng lặp -->
<!-- contains the content to be loaded when scrolled -->
<nav id="page-nav">
<a href="pages/2.html"></a>
</nav>
<script src="http://www.jquery4u.com/demos/infinite-scrolling-demo1/js/jquery.masonry.min.js"></script> <script src="http://www.jquery4u.com/demos/infinite-scrolling-demo1/js/jquery.infinitescroll.min.js"></script> <script> $(function(){ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.box', columnWidth: 100 }); }); $container.infinitescroll({ navSelector : '#page-nav', // selector for the paged navigation nextSelector : '#page-nav a', // selector for the NEXT link (to page 2) itemSelector : '.box', // selector for all items you'll retrieve loading: { finishedMsg: 'No more pages to load.', img: 'http://www.jquery4u.com/demos/infinite-scrolling-demo2/ajax-loader.gif' } }, // trigger Masonry as a callback function( newElements ) { // hide new items while they are loading var $newElems = $( newElements ).css({ opacity: 0 }); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); } ); }); </script>
