目录
[隐藏]

http://www.ylsnuha.com/wp-content/uploads/auto_save_image/2011/11/130406Zs7.jpg

infinite-scroll一开始这个效果是因为看见荒野无灯那看见的,然后又冒出来说那个瀑布流主题。然后这几天也改改主题的,原来想集成进去的,后来还是没有去弄。。。 :mrgreen:

infinite-scroll使用

首先就是引入JQuery,一般的主题都已经ok了的~~

然后去下载infinite-scroll

首先下载 jquery.infinitescroll.js and minified are now on GitHub(官方)

引入:

<script type="text/javascript" src="jquery.infinitescroll.min.js"></script>

infinite-scroll使用最后是js代码:

$(document).ready(function(){
$('#icontent').infinitescroll({
//#indexpost 是包括所有文章的div元素id
navSelector  : "#navigation",
// 页面分页元素(成功后隐藏)
nextSelector : "#navigation a",
// 需要点击的下一页链接
itemSelector : "#icontent div.post"   ,
// 返回后文章对应的插入位置
loadingImg   : "图片地址",
//加载图片路径(绝对路径)
loadingText  : "加载中..." ,
//显示的提示文字
animate      : true,
//加载完毕是否采用动态效果
extraScrollPx: 150,
//向下滚动的像素,必须开启动态效果
donetext     : "后面没有了" ,
//返回404,即到头了显示的文字
},function(arrayOfNewElems){
});
// 取消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();
});
});

PS:infinite-scroll使用一般要看自己主题的Html代码结构:

<div id="content">
<div id="icontent">

</div><!--icontent-->
<div id="navigation"><?php next_posts_link(__('MORE')) ?></div>
</div><!--content-->

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

next_posts_link(__('MORE'))

这样应该可以实现无限滚屏,就像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();
    });

infinite-scroll使用还需要设计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;”成功后还要显示下一页的分页链接,不能隐藏。

via:http://winysky.com/unlimited-paging-effects

这样应该就可以了。infinite-scroll