一些web2.0网站如facebook、Twitter、人人网底部的分页导航效果，都是采用了无限分页的效果。当然在google reader里面也有类似的endless滚动效果，比传统的分页导航新奇，有更好的用户体验。wordpress里面也可以用到像 twitter more 的方式分页，简单的用jQuery插件就可以实现。

最开始是从jinwen的Js O4w主题上看到这个效果，不过我看了源代码，他只是用了三层获取，就是做三个more.php文件用来响应三次点击事件，并不是真正的无限分页，而且实现起来比较麻烦。找了很久，最近发现了一个infinite-scroll，同时提供了实现这个效果的wordpress插件以及JQuery插件。看了一下，其实wordpress插件原理都是一样，设置也比较麻烦，还不如直接上js来的直接，原文是英语的，转过来：Infinite Scroll jQuery Plugin

原理：jQuery里面有个.load()函数，和ajax结合可以从url获取的html中取出指定选择器里面的元素插入到原页面中

DEMO：可以看看我首页的效果

使用方法：
首先下载 jquery.infinitescroll.js and minified are now on GitHub（官方）

或者从我的站点下载 (大小5kb)

使用方法很简单，加载jQuery库（1.26以上），假设你的首页有如下结构：

<div id="indexpost">
<div id="post-xxx">xxx</div>
<div id="post-xxx">xxx</div>
......

</div>
<div id="navigation"><a href=""../page/2>下一页</a></div>

当然，因为只需要下一页，分页插件是不需要了，在index.php对应的地方就用默认的分页：

next_posts_link(__('MORE'))

在合适的地方加入一段js：（注意更改 对应的选择器适应自己的主题）

$('#indexpost').infinitescroll({
   //#indexpost 是包括所有文章的div元素id
      navSelector  : "#navigation",
                     // 页面分页元素(成功后隐藏)
      nextSelector : "#navigation a",
                     // 需要点击的下一页链接
      itemSelector : "#indexpost div.post"   ,
                     // 返回后文章对应的插入位置
      loadingImg   : themeurl+"/images/ajax-loader.gif",
                     //加载图片路径（绝对路径）
      loadingText  : "加载中...",
                   //显示的提示文字
      animate      : true,
                   //加载完毕是否采用动态效果
      extraScrollPx: 150,
                  //向下滚动的像素，必须开启动态效果
      donetext     : "后面没有了" ,
                //返回404，即到头了显示的文字
    },function(arrayOfNewElems){
       home_js();
            //成功后执行的自定义的函数，如页面javascript的重载

 });

这样应该可以实现无限滚屏，就像google reader，到底部自动ajax载入下一页。但这样有时候页面很多，而访客并不想翻页，那么需要一个点击后再加载下页的功能，就像twitter底部点击more的效果。

那么继续在上一段js后加入：

// 取消scroll绑定
    $(window).unbind('.infscr');
  // 手动点击的元素
    $('#navigation a').click(function(){
      $(document).trigger('retrieve.infscr');
      return false;
    });

    // 如果没有下一页，去掉分页
    $(document).ajaxError(function(e,xhr,opt){
      if (xhr.status == 404) $('#navigation').remove();
    });

还需要设计more按钮的css，例如：

#navigation{display:block!important; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; border: 1px solid #ddd; background: #EFEFEF;box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; text-decoration: none;width:60%;margin:0 0 0 90px; padding: 10px;text-align: center;}

自己可以设计以适应模板，注意“display:block!important;”成功后还要显示下一页的分页链接，不能隐藏。

这样应该就可以了。