吉吉于

Ajax 瀑布流布局

玩过微博的朋友都知道,下拉到底部的时候会自动读取之前的内容。

还有很多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>

1.把主题分页的的部分更改为:

<div class=”pagenavi”>
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;
});

其中zw+=6000是我的主题横向滚动所用,不适合大部分主题,所以可以去掉$(“#posts”).width(zw+=6000);这一句。

解释一下:

#posts是包含文章列表的id

.text是文章的class

OK,现在你可以体验读取的快感了。

ps: 如果想自动加载的话,那么click事件换位scroll就可以了,具体自行折腾吧。

 

转载请注明:于哲的博客 » Ajax 瀑布流布局