dede织梦瀑布流代码,可修改为点击加载更多
首先我先把瀑布流的代码安装发放写给大家,后面简单写下如何修改为点击才会加载更多。
此版本为utf8版本,你也可以修改下编码把utf8改为gbk来使用到gbk程序上面。
首先页面上必须加载这三个js:
001 |
<script type= "text/javascript" src= "{dede:global.cfg_templets_skin/}/js/jquery-1.6.4.min.js" ></script> |
002 |
003 |
<script type= "text/javascript" src= "{dede:global.cfg_templets_skin/}/js/jquery.masonry.min.js" ></script> |
004 |
005 |
<script type= "text/javascript" src= "{dede:global.cfg_templets_skin/}/js/waterfall.js" ></script> |
瀑布流调用方法:
001 |
<ul class="clear" id="content"> |
002 |
{dede:list pagesize='3'} |
003 |
<li class="post"> |
004 |
<a href="[field:arcurl/]" class="title">[field:title/]</a> |
005 |
</li> |
006 |
{/dede:list} |
007 |
</ul> |
要注意,本瀑布流为无限加载形式,所以分页处一定要注意,调用方法为:
001 |
<div class=”next_page” style=”font-size:17px;”> |
002 |
003 |
{dede:pagelist listitem=”next”/} |
004 |
005 |
</div > |
下载地址
上面就是瀑布流的代码,一下简单放给大家如何修改为点击加载
首先打开waterfall.js文件:
原理只是把原始文件这里的鼠标绑定事件修改为了单击触发事件。
//首先给窗口绑定事件scroll
001 |
$(window).bind("scroll",function() { |
修改为
001 |
$("#dianhuafei").click(function() { |
因为上文已经使用单击触发了事件,所以原有的判断滚动条是否接近底部已经没有意义了,故可以直接删去这个if判断,直接执行if里面的代码:
// 然后判断窗口的滚动条是否接近页面底部,这里的20可以自定义
001 |
if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) { |
我们需要使用dede的 {dede:pagelist listitem=”next”/}来获取每个页面的数据所以模板中的dede分页代码不能删去。
只需要将
001 |
else { |
002 |
003 |
link.html("下一页没有了").removeAttr("href"); |
004 |
}; |
修改为
001 |
else { |
002 |
$("#dianhuafei").html("已经是最后一页了"); |
003 |
link.html("下一页没有了").removeAttr("href"); |
004 |
}; |
同时将模板中代码按下文修改,原理是我们绑定的是id的dianhuafei的单击才会触发事件,因此我们要写一句触发事件的代码,原有的分页代码不能删除,所以我们用css将其隐藏即可.
001 |
<h2 class="next_page" style="font-size:17px;"> |
002 |
{dede:pagelist listitem="next"/} |
003 |
</h2> |
修改为:
001 |
<div class="next_page" style="font-size:17px;"> |
002 |
<span id="dianhuafei">再看八条</span><div style="display:none;"> {dede:pagelist listitem="next"/}</div> |
003 |
</div> |
注:模板中列表调用代码{dede:list pagesize=’8′}中的8即为每次加载的条数。
☉首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(984818011)进行交流。
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(984818011)进行交流。
相关教程:
常用DEDE插件
- 织梦dedecms在线客服插件GBK+utf-8两种编码
- 织梦社会化插件v1.1
- 织梦挑错管理插件的作用和用法!
- 织梦CMS安装百度分享按钮插件图文教程详解
- 织梦dedecms插件实现您是本站的多少位访客
- 织梦cms/dedecms5.7 仿商城多参数筛选插件 自定义模型
- dede首页分页支持list标签及分页标签(pagelist)
- 网页MP4播放器酷播迷你CuPlayerMiniV4(免费版)下载
- 织梦DEDECMS万能幻灯片插件
- DedeCMS实现自定义表单提交后发送指定QQ邮箱的方法
- 织梦更换kindeditor编辑器的方法以及程序包下载
- 织梦消息提示框 dedecms系统提示 带倒计时