dede织梦瀑布流代码,可修改为点击加载更多

本文介绍了如何将dede织梦的瀑布流代码修改为点击加载更多的模式,详细讲解了需要修改的js文件和模板部分,包括替换滚动事件为点击事件,调整分页代码,并给出了模板修改示例。
摘要由CSDN通过智能技术生成


这个版本太麻烦,重新整理了一个:https://blog.csdn.net/jklgfgdsr/article/details/86704881

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

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

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

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

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

瀑布流调用方法:

<ul class="clear" id="content">
{dede:list pagesize='3'}
<li class="post">
<a href="[field:arcurl/]" class="title">[field:title/]</a>
</li>
{/dede:list}
</ul>

要注意,本瀑布流为无限加载形式,所以分页处一定要注意,调用方法为:

<div class=”next_page” style=”font-size:17px;”>
{dede:pagelist listitem=”next”/}
</div >

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

$(window).bind("scroll",function() {

修改为

$("#dianhuafei").click(function() {

因为上文已经使用单击触发了事件,所以原有的判断滚动条是否接近底部已经没有意义了,故可以直接删去这个if判断,直接执行if里面的代码:
  // 然后判断窗口的滚动条是否接近页面底部,这里的20可以自定义

if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) {

我们需要使用dede的 {dede:pagelist listitem=”next”/}来获取每个页面的数据所以模板中的dede分页代码不能删去。
  只需要将

else {
link.html("下一页没有了").removeAttr("href");
};

修改为

else {
$("#dianhuafei").html("已经是最后一页了");
link.html("下一页没有了").removeAttr("href");
};

同时将模板中代码按下文修改,原理是我们绑定的是id的dianhuafei的单击才会触发事件,因此我们要写一句触发事件的代码,原有的分页代码不能删除,所以我们用css将其隐藏即可。

<h2 class="next_page" style="font-size:17px;">
{dede:pagelist listitem="next"/}
</h2>

修改为:

<div class="next_page" style="font-size:17px;">
<span id="dianhuafei">再看八条</span><div style="display:none;"> {dede:pagelist listitem="next"/}</div>
</div>

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值