一般都会把masonry和infinitescroll联合使用
基本:
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script src="jquery.infinitescroll.min.js" type="text/javascript"></script>
<script src="jquery.masonry.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var $container = $('#content ul'); //设置容器
$('#content ul').infinitescroll({
navSelector : "div.page .pages", //导航的选择器
nextSelector : "div.page .pages a.nextpage", //包含下一页链接的选择器
itemSelector : "#content ul li" //你将要取回的选项(内容块)
}, function( newElements ) {
//程序执行完的回调函数
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
});
$('#content').masonry({
itemSelector : '#content li', //子类元素
columnWidth : 251 //一列的宽度
});
});
</script>
实例1:加载10页后停止,出现大分页数字
<script type="text/javascript">
function item_masonry(){
$('.item img').load(function(){
$('.infinite_scroll').masonry({
itemSelector: '.masonry_brick',
columnWidth:226,
gutterWidth:15
});
});
$('.infinite_scroll').masonry({
itemSelector: '.masonry_brick',
columnWidth:226,
gutterWidth:15
});
}
$(function(){
item_masonry();
$('.item').fadeIn();
var sp = 1
$(".infinite_scroll").infinitescroll({
navSelector : "#more",
nextSelector : "#more a",
itemSelector : ".item",
loading:{
img: "images/masonry_loading_1.gif",
msgText: ' ',
finishedMsg: '木有了',
finished: function(){
sp++;
if(sp>=10){ //到第10页结束事件
$("#more").remove();
$("#infscr-loading").hide();
$("#page").show();
$(window).unbind('.infscr');
}
}
},errorCallback:function(){
$("#page").show();
}
},function(newElements){
var $newElems = $(newElements);
$('.infinite_scroll').masonry('appended', $newElems, false);
$newElems.fadeIn();
item_masonry();
return;
});
});
</script>
<div class="item_list infinite_scroll">
<div class="item masonry_brick">...</div>
......
</div>
<div id="more"><a href="p2.html"></a></div>
<div id="page" class="page" style="display:none;">
<div class="page_num">
<span class="unprev"></span>
<span class="current">1</span>
<a href="p11.html"> 2 </a>
<a href="p21.html"> 3 </a>
<a href="p31.html"> 4 </a>
<a href="p41.html"> 5 </a>
<span class="etc"></span>
<a href="p111.html">12</a>
<a href="#" class="next"></a>
</div>
</div>
实例2:masonry官网上的例子http://masonry.desandro.com/demos/infinite-scroll.html
<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://i.imgur.com/6RMhx.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>
<div id="container">
<div class="box col3">...</div>
<div class="box col1">...</div>
<div class="box col2">...</div>
......
</div>
<nav id="page-nav">
<a href="../pages/2.html"></a>
</nav>