最基本用法: [javascript] view plaincopy $( #content ).infinitescroll({ //#content是包含所有图或块的容器 navSelector: div.navigation , //导航的容器,成功后会被隐藏 nextSelector: div.navigationa:first , //包含下一页链接的容器 itemSelector:
最基本用法:
-
$('#content').infinitescroll({
-
navSelector : "div.navigation",
-
nextSelector : "div.navigation a:first",
-
itemSelector : "#content div.post"
-
});
-
-
<div id='content'>
-
<div class='post'>...</div>
-
......
-
</div>
-
<div class='navigation'><a href='p2.html'></a></div>
更多参数:
-
$('#content').infinitescroll({
-
navSelector : "div.navigation",
-
nextSelector : "div.navigation a:first",
-
itemSelector : "#content div.post",
-
debug : true,
-
loadingImg : "/img/loading.gif",
-
-
animate : true,
-
extraScrollPx: 50,
-
bufferPx : 40,
-
errorCallback: function(){},
-
localMode : true
-
},function(arrayOfNewElems){
-
-
});
-
-
-
$(window).unbind(‘.infscr’);
-
-
-
$(document).trigger(‘retrieve.infscr’);
-
-
-
$('').load('/page/2/ #content div.post',function(){ $(this).appendTo('#content'); });
实例1:只要有页,就会一直加完为止
-
$('#content').infinitescroll({
-
navSelector : '#pagenav',
-
nextSelector : '#pagenav a',
-
itemSelector : ".picdiv",
-
debug : false,
-
loadingImg : "ajax-loader.gif",
-
loadingText : "Loading new posts...",
-
animate : false,
-
donetext : "I think we've hit the end, Jim"
-
},function(){});
-
-
<div id='content'>
-
<div class='picdiv'>...</div>
-
......
-
</div>
-
-
<span id="pagenav" style="display:none" > <a href="index.phppage=2&show=">Next</a></span>
实例2:加到10页就不再加
-
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){
-
$("#more").remove();
-
$("#infscr-loading").hide();
-
$("#page").show();
-
$(window).unbind('.infscr');
-
}
-
}
-
},errorCallback:function(){
-
$("#page").show();
-
}
-
},function(newElements){
-
var $newElems = $(newElements);
-
$newElems.fadeIn();
-
return;
-
});
-
<div class='infinite_scroll'>
-
<div class='item'>...</div>
-
......
-
</div>
-
<div id='more'><a href='p2.html'></a></div>
PS:被取用的那个页可以是个完整的包含调用内容块的网页,也可以只有被调用的内容块(连HTML和HEAD和BODY标签都没有)。