官网和下载地址:
http://www./
当前版本1.51
使用实例:
http://www./jquery/demo/2012-10-31/790.html
http:///
最基本用法:
- $('#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.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){
- $("#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标签都没有)。