美文网首页
dedecms 列表页点击加载更多,已验证OK

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

作者: 第二梦喵将 | 来源:发表于2019-06-11 18:44 被阅读0次

    <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,有修改)

    相关文章

      网友评论

          本文标题:dedecms 列表页点击加载更多,已验证OK

          本文链接:https://www.haomeiwen.com/subject/velcfctx.html