元素模板为您解答:
首先列表页加入下面JS
<script type="text/javascript" src="query-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script type="text/javascript" src="waterfall.js"></script>前2个网上都可以下载
最后一个 waterfall.js 代码为
// JavaScript Document$(function(){//对content使用masonry插件$('#content').masonry({itemSelector : '.post',columnWidth : 251});//首先给窗口绑定事件scroll$(window).bind("scroll",function() {// 然后判断窗口的滚动条是否接近页面底部,这里的20可以自定义if ($(document).scrollTop() + $(window).height() > $(document).height() - 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);} else {link.html("没有了").removeAttr("href");};}});};//返回false,使得点击进入新页面失效return false;}})});
下面是 代码部分
<ul id="content">{dede:list pagesize='9'}<li class="post">样式内容</li>{/dede:list}</ul><div class="next_page">{dede:pagelist listitem="next"/}</div>
以上代码为必须存在,缺一不可。