dedecms 列表页点击加载更多，已验证OK

<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，有修改）

最后编辑于：2019.06.28 18:01:42