dede列表页点击“加载更多”追加显示内容方法

我们在用dede建网站的时候，在手机端使用跟pc端一样的分页，功能固然能达到，但用户体验毕竟不好，在手机端最好还是用上拉加载或者点击加载比较方便，不用担心点击不准确。如下图情况：

这里我制作一次点击加载，方法如下：

首先我们需要在dede模版页面引用jquery.masonry.min.js插件，这个插件是专门用来制作瀑布流效果的。

dede点击瀑布流.rar

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.masonry.min.js"></script>

该页面前端如下：

<section>
<div class="content">
    <ul  id="content">  //此处content对应下面js代码的第四行的#content
        {dede:list pagesize='3' }
         <li class="post">  //此处post对应下面js代码的find(".post")
         <a href="[field:arcurl function='GetWapUrl(@me)'/]">[field:title/]</a><time>[field:pubdate function="MyDate('Y-m-d',@me)"/] </time>
         </li>
        {/dede:list}
    </ul>
</div>
</section>
<div class="button">
    <button>
    <div class="next_page" style="font-size:17px;"> 
        <span id="dianhuafei">加载更多</span>    //此处dianhuafei对应下面js代码的点击事件
        <div style="display:none;"> {dede:pagelist listitem="next" function='GetWapUrl(@me)/}</div> 
    </div> 
    </button>
</div>

然后再页面最下面写上js代码

// JavaScript Document
$(function(){
        //对content使用masonry插件
        $('#content').masonry({
            itemSelector : '.post',
            columnWidth : 251
        });
            
    //首先给窗口绑定事件scroll
    $("#dianhuafei").click(function() {
        // 然后判断窗口的滚动条是否接近页面底部，这里的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 {
                        $("#dianhuafei").html("已经是最后一页了");
                        link.html("下一页没有了").removeAttr("href");
                    };
                }
            });
        };
        //返回false，使得点击进入新页面失效
        return false;
    })
});