终于被我折腾出来了 —— 文章分页无限加载。使用的是 Infinite Ajax Scroll 无限滚动加载插件,下面是教程:

步骤一

这是jq效果,所以要加载jQuery库,使用1.11.1版无压力。

步骤二

使用下面封装好的 Infinite Ajax Scroll 脚本js ,代码如下:

// Infinite Ajax Scroll, a jQuery plugin 1.0.2
!function(a){"use strict";Date.now=Date.now||function(){return+new Date},a.ias=function(b){function c(){var b,c;return u.onChangePage(function(a,b,c){v&&v.setPage(a,c),s.onPageChange.call(this,a,c,b)}),s.triggerPageThreshold>0?d():a(s.next).attr("href")&&(c=t.getCurrentScrollOffset(s.scrollContainer),q(function(){i(c)})),v&&v.havePage()&&(f(),b=v.getPage(),t.forceScrollTop(function(){var c;b>1?(k(b),c=h(!0),a("html, body").scrollTop(c)):d()})),w}function d(){g(),s.scrollContainer.scroll(e)}function e(){var a,b;a=t.getCurrentScrollOffset(s.scrollContainer),b=h(),a>=b&&(l()>=s.triggerPageThreshold?(f(),q(function(){i(a)})):i(a))}function f(){s.scrollContainer.unbind("scroll",e)}function g(){a(s.pagination).hide()}function h(b){var c,d;return c=a(s.container).find(s.item).last(),0===c.size()?0:(d=c.offset().top+c.height(),b||(d+=s.thresholdMargin),d)}function i(b,c){var e;return(e=a(s.next).attr("href"))?(s.beforePageChange&&a.isFunction(s.beforePageChange)&&s.beforePageChange(b,e)===!1||(u.pushPages(b,e),f(),n(),j(e,function(b,h){var j,i=s.onLoadItems.call(this,h);i!==!1&&(a(h).hide(),j=a(s.container).find(s.item).last(),j.after(h),a(h).fadeIn()),e=a(s.next,b).attr("href"),a(s.pagination).replaceWith(a(s.pagination,b)),o(),g(),e?d():f(),s.onRenderComplete.call(this,h),c&&c.call(this)})),void 0):(s.noneleft&&a(s.container).find(s.item).last().after(s.noneleft),f())}function j(b,c,d){var f,h,i,e=[],g=Date.now();d=d||s.loaderDelay,a.get(b,null,function(b){f=a(s.container,b).eq(0),0===f.length&&(f=a(b).filter(s.container).eq(0)),f&&f.find(s.item).each(function(){e.push(this)}),c&&(i=this,h=Date.now()-g,d>h?setTimeout(function(){c.call(i,b,e)},d-h):c.call(i,b,e))},"html")}function k(b){var c=h(!0);c>0&&i(c,function(){f(),u.getCurPageNum(c)+1<b?(k(b),a("html,body").animate({scrollTop:c},400,"swing")):(a("html,body").animate({scrollTop:c},1e3,"swing"),d())})}function l(){var a=t.getCurrentScrollOffset(s.scrollContainer);return u.getCurPageNum(a)}function m(){var b=a(".ias_loader");return 0===b.size()&&(b=a('<div class="ias_loader">'+s.loader+"</div>"),b.hide()),b}function n(){var c,b=m();s.customLoaderProc!==!1?s.customLoaderProc(b):(c=a(s.container).find(s.item).last(),c.after(b),b.fadeIn())}function o(){var a=m();a.remove(),img_lazyload()}function p(b){var c=a(".ias_trigger");return 0===c.size()&&(c=a('<div class="ias_trigger"><a href="#">'+s.trigger+"</a></div>"),c.hide()),a("a",c).unbind("click").bind("click",function(){return r(),b.call(),!1}),c}function q(b){var d,c=p(b);s.customTriggerProc!==!1?s.customTriggerProc(c):(d=a(s.container).find(s.item).last(),d.after(c),c.fadeIn())}function r(){var a=p();a.remove()}var s=a.extend({},a.ias.defaults,b),t=new a.ias.util,u=new a.ias.paging(s.scrollContainer),v=s.history?new a.ias.history:!1,w=this;c()},a.ias.defaults={container:"#container",scrollContainer:a(window),item:".item",pagination:"#pagination",next:".next",noneleft:!1,loader:'<img src="img/loading.gif"/>',loaderDelay:600,triggerPageThreshold:3,trigger:"Load more items",thresholdMargin:0,history:!0,onPageChange:function(){},beforePageChange:function(){},onLoadItems:function(){},onRenderComplete:function(){},customLoaderProc:!1,customTriggerProc:!1},a.ias.util=function(){function b(){a(window).load(function(){c=!0})}var c=!1,d=!1,e=this;b(),this.forceScrollTop=function(b){a("html,body").scrollTop(0),d||(c?(b.call(),d=!0):setTimeout(function(){e.forceScrollTop(b)},1))},this.getCurrentScrollOffset=function(a){var b,c;return b=a.get(0)===window?a.scrollTop():a.offset().top,c=a.height(),b+c}},a.ias.paging=function(){function b(){a(window).scroll(c)}function c(){var b,c,f,j,k;b=i.getCurrentScrollOffset(a(window)),c=d(b),f=e(b),h!==c&&(j=f[0],k=f[1],g.call({},c,j,k)),h=c}function d(a){for(var b=f.length-1;b>0;b--)if(a>f[b][0])return b+1;return 1}function e(a){for(var b=f.length-1;b>=0;b--)if(a>f[b][0])return f[b];return null}var f=[[0,document.location.toString()]],g=function(){},h=1,i=new a.ias.util;b(),this.getCurPageNum=function(b){return b=b||i.getCurrentScrollOffset(a(window)),d(b)},this.onChangePage=function(a){g=a},this.pushPages=function(a,b){f.push([a,b])}},a.ias.history=function(){function a(){c=!!(window.history&&history.pushState&&history.replaceState),c=!1}var b=!1,c=!1;a(),this.setPage=function(a,b){this.updateState({page:a},"",b)},this.havePage=function(){return this.getState()!==!1},this.getPage=function(){var a;return this.havePage()?(a=this.getState(),a.page):1},this.getState=function(){var a,b,d;if(c){if(b=history.state,b&&b.ias)return b.ias}else if(a="#/page/"===window.location.hash.substring(0,7))return d=parseInt(window.location.hash.replace("#/page/",""),10),{page:d};return!1},this.updateState=function(a,c,d){b?this.replaceState(a,c,d):this.pushState(a,c,d)},this.pushState=function(a,d,e){var f;c?history.pushState({ias:a},d,e):(f=a.page>0?"#/page/"+a.page:"",window.location.hash=f),b=!0},this.replaceState=function(a,b,d){c?history.replaceState({ias:a},b,d):this.pushState(a,b,d)}}}(jQuery);
步骤三

执行用的函数和参数,都给注释好了,自己一看便知:

// 文章分页无限加载&加载更多
$(function() {
    $.ias({
        thresholdMargin: -100,
        triggerPageThreshold: 5, // 无限加载的次数,达到这个次数后就会显示手动“加载更多”
        history: false,
        container : '.post-warp', // 文章列表上一级容器
        item: '.post-box', // 文章列表的类
        pagination: '#pagination', // 分页导航父级容器
        next: '#pagination a', // 分页导航a标签
        loader: '<div class="loadmore">文章列表载入中...</div>', // 也可以用图片<img src="//i2.tietuku.com/ffc7389af9377412.gif"/>
        trigger: '加载更多', // 加载更多的文字
        onPageChange: function(pageNum, pageUrl, scrollOffset) {
            window._gaq && window._gaq.push(['_trackPageview', jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/')]);
        }
    });
});
步骤四

相应的CSS:

/*无限加载Loadmore*/
.loadmore{font-size: 14px;text-align:center;color:#fff;line-height:39px}
.ias_trigger {clear:both}
.ias_trigger a{background:rgba(0,0,0,0.2);display:block;line-height:35px;text-align:center;font-size:14px;color:#EEE;border-radius:5px}
最后的补充

这个无限加载重载js区在哪里?首先把上面的一大段js脚本解密,然后找到函数 function b(){ ... e.remove();} ,加在e.remove(); 后面就行了,也就是说这个b()函数就是用来重载的,需要重载的js函数放进去即可。以上。