欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > DEDECMS教程 >
DEDECMS教程

采用jquery.masonry.js给织梦列表做瀑布流无限加载

(元素模板) / 2017-01-13 14:14
采用jquery.masonry.js给织梦列表做瀑布流无限加载

元素模板为您解答:

首先列表页加入下面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>


以上代码为必须存在,缺一不可。

 
这样就完成了   织梦  无限加载的功能了

有需要显示正在加载的 可以参考  masonry.js 这个插件说明

相关样式说明点这里查看,大家可以按照这个来修改。
Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com