Ajax 瀑布流布局
29 Mar 2012玩过微博的朋友都知道，下拉到底部的时候会自动读取之前的内容。
还有很多wp主题也是利用Infinite Scroll这个插件来实现此功能。
不过有直接更改代码的方法，很简单，照着我的步骤来：
（引入jquery就不用说了吧）
首先，网页div布局应该符合以下结构：
<div id=“posts”>
<div class=“text”>文章标题/文章内容/文章标签等</div>
<div class=“text”>文章标题/文章内容/文章标签等</div>
<div class=“text”>文章标题/文章内容/文章标签等</div>
<div class=“text”>文章标题/文章内容/文章标签等</div>
</div>
<div class=“text”>文章标题/文章内容/文章标签等</div>
<div class=“text”>文章标题/文章内容/文章标签等</div>
<div class=“text”>文章标题/文章内容/文章标签等</div>
<div class=“text”>文章标题/文章内容/文章标签等</div>
</div>
1.把主题分页的的部分更改为：
<div class=”pagenavi”>
next_posts_link(__(‘LOAD MORE’)); ?>
</div>
next_posts_link(__(‘LOAD MORE’)); ?>
</div>
2.修改js
$(“.pagenavi a”).live(“click”, function(){
$(this).addClass(“loading”).append(‘<img src=”http://lazynight.me/loading.gif”>’);
$.ajax({
type: “POST”,
url: $(this).attr(“href”) + “#posts”,
success: function(data){
$(“#posts”).width(zw+=6000);
result = $(data).find(“#posts .text”);
nextHref = $(data).find(“.pagenavi a”).attr(“href”);
// 渐显新内容
$(“#posts”).append(result.fadeIn(300));
$(“.pagenavi a”).removeClass(“loading”).text(“LOAD MORE”);
if ( nextHref != undefined ) {
$(“.pagenavi a”).attr(“href”, nextHref);
} else {
$(“.pagenavi”).remove();
}
}
});
return false;
});
$(this).addClass(“loading”).append(‘<img src=”http://lazynight.me/loading.gif”>’);
$.ajax({
type: “POST”,
url: $(this).attr(“href”) + “#posts”,
success: function(data){
$(“#posts”).width(zw+=6000);
result = $(data).find(“#posts .text”);
nextHref = $(data).find(“.pagenavi a”).attr(“href”);
// 渐显新内容
$(“#posts”).append(result.fadeIn(300));
$(“.pagenavi a”).removeClass(“loading”).text(“LOAD MORE”);
if ( nextHref != undefined ) {
$(“.pagenavi a”).attr(“href”, nextHref);
} else {
$(“.pagenavi”).remove();
}
}
});
return false;
});
其中zw+=6000是我的主题横向滚动所用，不适合大部分主题，所以可以去掉$(“#posts”).width(zw+=6000);这一句。
解释一下：
#posts是包含文章列表的id
.text是文章的class
OK，现在你可以体验读取的快感了。
ps: 如果想自动加载的话，那么click事件换位scroll就可以了，具体自行折腾吧。
转载请注明：于哲的博客 » Ajax 瀑布流布局