您现在的位置是:黎青松SEO博客 >> 织梦CMS教程

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

黎青松SEO博客417人已围观

简介首先我先把瀑布流的代码安装发放写给大家,后面简单写下如何修改为点击才会加载更多。此版本为utf8版本,你也可以修改下编码把utf8改为gbk来使用到gbk程序上面。首先页面上必

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

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

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

瀑布流调用方法:


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

{dede:pagelist listitem=”next”/}

下载地址

织梦点击加载更多,,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将其隐藏即可.

{dede:pagelist listitem="next"/}


修改为:

再看八条
{dede:pagelist listitem="next"/}


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


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

Tags: dede织梦瀑布流代码,可修改为点击加载更多   织梦插件   dedecms插件   织梦扩展插件  

相关文章

黎青松SEO博客

擅长:企业站优化、行业站数据采集处理

Q Q:191988123

现居:四川-成都

网址:www.alitaohuo.com

标签云

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();