<div id="content">
{dede:list titlelen='42' pagesize='3' orderby='pubdate' noflag='h,c'}循环部分{/dede:list}
</div>
<h2 class="morearticle next_page" id="dianhuafei">
<i>点击加载更多</i><div style="display:none;"> {dede:pagelist listitem="next"/}</div>
</h2>
需要配合jquery.masonry.min.js使用:<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.masonry.min.js"></script>
后续代码可以写在html里,可以放在js文件里:<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/waterfall.js"></script>
// JavaScript Document
$(function(){
//对content使用masonry插件
$('#content').masonry({
itemSelector : '.post',
columnWidth : 800
});
//首先给窗口绑定事件scroll
$("#dianhuafei").click(function() {
$("#dianhuafei i").html('正在加载中...');
// 然后判断窗口的滚动条是否接近页面底部,这里的20可以自定义
var link = $(".next_page a");
//首先取得下一页的链接地址
var href = link.attr("href");
//判断下一页的链接地址是否存在
if (href != undefined) {
//如果存在的话,用ajax获取数据
$.ajax({
type: "get",
url: href,
success: function(data) {
//将返回的数据进行处理,挑选出class是post的内容块
var $res = $(data).find(".post");
//结合masonry插件,将内容append进ID是content的内容块中
$("#content").append($res).masonry('appended', $res);
//newHref获取返回的内容中的下一页的链接地址
var newHref = $(data).find(".next_page a").attr("href");
//判断下一页地址是否存在,如果存在,替换当前页的链接地址。不存在,将当前页链接地址属性href移除,并替换内容为"下一页没有了"
if (newHref != undefined) {
link.attr("href", newHref);
$("#dianhuafei i").html('点击加载更多');
} else {
$("#dianhuafei i").html("已经是最后一页了");
link.html("下一页没有了").removeAttr("href");
};
}
});
}
//返回false,使得点击进入新页面失效
return false;
})
});
(参考:http://www.dede58.com/a/dedesj/2018/0407/7716.html,有修改)
网友评论