【JQ】⽆限滚动条-jquery.infinitescroll.js使⽤说明最基本⽤法：
$('#content').infinitescroll({    //#content是包含所有图或块的容器
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>//这⾥的链接页⾯名⾥要有个2才⾏，后⾯的页⾯名同位置换3、4...如p3.html
更多参数：
$('#content').infinitescroll({
navSelector  : "div.navigation", //导航的选择器，会被隐藏
nextSelector : "div.navigation a:first",//包含下⼀页链接的选择器
itemSelector : "#content div.post",//你将要取回的选项(内容块)
debug        : true, //启⽤调试信息
loadingImg  : "/img/loading.gif", //加载的时候显⽰的图⽚
//默认采⽤："www.infinite-scroll/loading.gif"
animate      : true, //当有新数据加载进来的时候，页⾯是否有动画效果，默认没有
extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150
bufferPx    : 40,//载⼊信息的显⽰时间，时间越⼤，载⼊信息显⽰时间越短
errorCallback: function(){},//当出错的时候，⽐如404页⾯的时候执⾏的函数
localMode    : true //是否允许载⼊具有相同函数的页⾯，默认为false
},function(arrayOfNewElems){
//程序执⾏完的回调函数
});
//取消绑定事件的函数写法：
$(window).unbind(‘.infscr’);
//通过事件触发加载数据的写法：
$(document).trigger(‘retrieve.infscr’); //⽐如加到某个click事件中
//此插件还可以载⼊任何页⾯的容器中的内容，可以是id以及是class，并转化到html存储，要⽐jquery⾃带的的load强⼤。
$('').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 ",
animate      : false,
donetext    : "I think we've hit the end, Jim"
},function(){});
<div id='content'>
<div class='picdiv'>...</div>
......
</div>
<span id="pagenav" > <a href="index.php?page=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){ //到第10页结束事件
$("#more").remove();
$("#infscr-loading").hide();
$("#page").show();
js控制滚动条
$(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标签都没有）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。