【JQ】无限滚动条-jquery.infinitescroll.js使用说明

官网和下载地址：
http://www.infinite-scroll.com/

当前版本1.51
使用实例：
http://www.jsfoot.com/jquery/demo/2012-10-31/790.html
http://iiiimg.com/

 

最基本用法：

$('#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", //加载的时候显示的图片
                 //默认采用："http://www.infinite-scroll.com/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 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.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();
				$(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标签都没有）。