自动加载瀑布流

这个版本太麻烦，重新整理了一个：https://blog.youkuaiyun.com/jklgfgdsr/article/details/86704881

重新整理了一下，可以直接看里面的list_article.htm模板。
重新整理的链接点击下载https://pan.baidu.com/s/1LNuxe_LW5yvU1HpH9TV1kw
基本上只要没有冲突就能正常显示，需要注意的是class="next_page"里的东西能不动就不动，如果要修改，记得同时修改waterfall.js里对应的标签。{dede:list}上一级标签中不要忘了加id=“content”，而且不要有任何其他的id。

↓↓↓↓下面的是原教程↓↓↓↓

嫌麻烦可以直接下载下面的两个文件（注意：程序为UTF-8版本）：
　　滚动自动加载瀑布流代码[点此下载]
　　点击加载瀑布流代码[点此下载]

首先页面上必须加载这三个js：

1
2
3
瀑布流调用方法：

• {dede:list pagesize='3'}
• [field:title/]
• {/dede:list}

1 2 3 4 5 6 7 要注意，本瀑布流为无限加载形式，所以分页处一定要注意，调用方法为：

{dede:pagelist listitem=”next”/}

1 2 3 上面就是瀑布流的代码，一下简单放给大家如何修改为点击加载 　　首先打开waterfall.js文件： 　　原理只是把原始文件这里的鼠标绑定事件修改为了单击触发事件。 　　//首先给窗口绑定事件scroll

$(window).bind(“scroll”,function() {
1
修改为

$("#dianhuafei").click(function() {
1
因为上文已经使用单击触发了事件，所以原有的判断滚动条是否接近底部已经没有意义了，故可以直接删去这个if判断，直接执行if里面的代码：
　　// 然后判断窗口的滚动条是否接近页面底部，这里的20可以自定义

if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {
1
我们需要使用dede的 {dede:pagelist listitem=”next”/}来获取每个页面的数据所以模板中的dede分页代码不能删去。
　　只需要将

else {
link.html(“下一页没有了”).removeAttr(“href”);
};
1
2
3
修改为

else {
$("#dianhuafei").html(“已经是最后一页了”);
link.html(“下一页没有了”).removeAttr(“href”);
};
1
2
3
4
同时将模板中代码按下文修改，原理是我们绑定的是id的dianhuafei的单击才会触发事件，因此我们要写一句触发事件的代码，原有的分页代码不能删除，所以我们用css将其隐藏即可。

{dede:pagelist listitem="next"/}

1 2 3 修改为：

再看八条

{dede:pagelist listitem="next"/}

1 2 3 注：模板中列表调用代码{dede:list pagesize=’8′}中的8即为每次加载的条数。 ---------------------