欢迎来到织梦58!我们致力于织梦商业模板及VIP模板更新

织梦58

DEDE插件 首页 > 织梦学院 > DEDE插件 >

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

购买

首先我先把瀑布流的代码安装发放写给大家,后面简单写下如何修改为点击才会加载更多。

此版本为utf8版本,你也可以修改下编码把utf8改为gbk来使用到gbk程序上面。

首先页面上必须加载这三个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 >

下载地址

   织梦点击加载更多,,http://pan.baidu.com/s/1i5Q296l
   织梦滚动加载更多,,http://pan.baidu.com/s/1eRTaqYY




上面就是瀑布流的代码,一下简单放给大家如何修改为点击加载
首先打开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即为每次加载的条数。

<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/waterfall.js"></script>

link.html("下一页没有了").removeAttr("href");
插件大小:53 KB 所属频道:DEDE插件/更新时间:2018-04-07
插件标签:
☉推荐使用百度云管家下载本站存放在百度网盘源码资源。
☉未登录会员无法下载,登录后可获得更多便利功能,如未注册,请先注册
☉如果源码网盘地址失效!或有其他问题,请点我报错,谢谢合作!
☉本站所有资源(包括模板、素材、插件等)仅供学习与参考,请勿用于商业用途。
☉人民币与金币汇率为1比10,即1元=10金币.有任何疑问请联系客服
进入模板下载地址 售价:0金币 网盘提取码: [充值][收藏][返回列表]
在线客服

×关闭