500元精品仿站

织梦模板列表页实现点击加载更多

大鱼君 2019-09-06 织梦教程 关键词:织梦列表页,织梦点击加载更多,织梦瀑布流

织梦系统自带有翻页功能,但时下比较流行瀑布流点击自动加载更多的展示形式。本文介绍如何实现织梦模板列表页点击按钮加载更多。

我们首先要在需要列表页模板中引入三段JS代码:

<script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/hellodede/js/waterfall.js"></script>

jquery可以再网上下载,以下是 waterfall.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;
	})
});

织梦列表模板通常用 {dede:list} 来调用文章,下面是列表页调用以及加载按钮的写法:

<div class="body clear">
	<ul class="clear" id="content">
		{dede:list pagesize='3'}
		<li class="post">
		   <a href="[field:arcurl/]" class="title">[field:title/]</a>
		</li><br />
		{/dede:list}
	</ul>
	<h2 class="next_page" style="font-size:17px;">
		<span id="dianhuafei">点击加载更多</span><div style="display:none;"> {dede:pagelist listitem="next"/}</div>
	</h2>
</div>
{dede:pagelist listitem="next"/}
{dede:pagelist listitem="next"/}

这里需要注意 dede list 的父级标签的id属性 content ,以及点击加载按钮的 id ="dianhuafei"

分享织梦模板列表页实现点击加载更多完整代码:

链接:https://pan.baidu.com/s/10N9x9VbGqds9fRfK40BpwQ

提取码:8x0h

500元精品仿站
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

Hello, 欢迎加入DEDECMS技术交流群,一起讨论织梦建站!

我要入群

织梦模板推荐

  • 台湾茶饮加盟类织梦网站模板(自适应)
  • 养老机构织梦网站模板(自适应)
  • 生物科技公司品牌展示网站织梦模板(自适应)
  • 家具品牌产品展示类织梦模板(自适应)
500元精品仿站

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧