欢迎来到欣怡建站！我们致力于提供优质的网站建站服务
注册

欣怡建站

每日更新|每板必测|Tag标签|充值
签到领金币！
首页 > cms教程 > 织梦技巧 >

dedecms瀑布流无限加载功能之点击加载

相关案例演示

自从上次发表了DEDE瀑布流的加载方法后（https://www.bnxb.com/dedecms/26944.html） 有网友反映希望能加个，通过点击加载文章。

其实很简单，只要在之前的基础上再添加一些代码，修改一些参数就行，下面我把有改动的代码贴上，大家可以跟上一篇文章比对一下

下面的这段代码是加了最后一行！

<ul class="yz_xinwen"> {dede:arclist row='8' titlelen='50'} &nbsp;&nbsp;&nbsp; <li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="viewimg"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="hotimgzz"></div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href=http://www.dede58.com/a/dedejq/"[field:arcurl/]" class="zzsz"></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href=http://www.dede58.com/a/dedejq/"[field:arcurl/]"&nbsp; target="_blank" title="[field:fulltitle/]"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img src=http://www.dede58.com/a/dedejq/"[field:litpic/]" alt="[field:fulltitle/]" width="250" height="165"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <div class="standpoint">[field:typelink/]</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div> &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <h3><a href=http://www.dede58.com/a/dedejq/"[field:arcurl/]"&nbsp; target="_blank" title="[field:fulltitle/]">[field:title/]</a></h3> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>[field:description/]...</p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>[field:pubdate function="MyDate('Y-m-d H:i',@me)"/]</span> &nbsp;&nbsp;&nbsp; </li> {/dede:arclist} </ul> <div class="yz_jiazai"><div style="width:100%; float:left; text-align:center; padding: 10px 0px; color:#fff; background:#00aa98; font-size: 16px; cursor:pointer;">加载更多1</div></div>  

下面这段代码有几处地方有修改和添加，我先贴出全部的，然后在把修改的代码贴出来

<script type="text/javascript"> var loadConfig = { &nbsp;&nbsp;&nbsp; url_api:'/plus/list.php', &nbsp;&nbsp;&nbsp; typeid:{dede:field name="typeid"/}, &nbsp;&nbsp;&nbsp; page:2, &nbsp;&nbsp;&nbsp; pagesize:8,&nbsp; //这个就是滑动一次添加几条信息的参数设置 &nbsp;&nbsp;&nbsp; loading : 0, } function&nbsp; loadMoreApply(){ &nbsp;&nbsp;&nbsp; if(loadConfig.loading == 0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var typeid = loadConfig.typeid; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var page = loadConfig.page; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var pagesize = loadConfig.pagesize; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var url = loadConfig.url_api,data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; console.log(dHeight); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (sTop + cHeight >= dHeight - cHeight) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.loading = 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function ajax(url, data) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; addContent(data);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ajax(url,data); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; } } function addContent (rs){ &nbsp;&nbsp;&nbsp; if(rs.statu== 1){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var data = rs.list; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var total = rs.total; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var arr=[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var length = data.length; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0;i<length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<li>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<div class="viewimg">'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<div class="hotimgzz"></div>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<a href="'+data[i].waparcurl+'" class="zzsz"></a>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<a href="'+data[i].waparcurl+'"&nbsp; target="_blank" title="'+data[i].title+'">'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<img src="'+data[i].picname+'" alt="'+data[i].title+'" width="250" height="165"/>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('</a>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<div class="standpoint"><a href="'+data[i].typeurl+'">'+data[i].typelink+'</a></div>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('</div>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<h3><a href="'+data[i].waparcurl+'"&nbsp; target="_blank" title="'+data[i].title+'">'+data[i].title+'</a></h3>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<p>'+data[i].description+'...</p>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('<span>'+data[i].stime+'</span>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; arr.push('</li>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('.yz_xinwen').append(arr.join('')); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.load_num = rs.load_num; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if((parseInt(total/8)+1) == loadConfig.page){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text-align:center; padding: 10px 0px; color:#fff; background:#00aa98; font-size: 16px; cursor:pointer;">加载完成</div>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text-align:center; padding: 10px 0px; color:#fff; background:#00aa98; font-size: 16px; cursor:pointer;">点击加载'+loadConfig.page+'</div>'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(total<loadConfig.page*loadConfig.pagesize || loadConfig.page > loadConfig.load_num){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window.removeEventListener('click',loadMoreApply,false); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.page++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; loadConfig.loading = 0; &nbsp;&nbsp;&nbsp; } } function pullLoad(){ &nbsp;&nbsp;&nbsp; window.addEventListener('click', loadMoreApply, false);&nbsp;&nbsp;&nbsp; } pullLoad(); </script>  

第一处修改的就是pagesize:8, 这个8最好跟上面的row=''这里面的数字同步

pagesize:8,  //这个就是滑动一次添加几条信息的参数设置

第二处修改的代码如下

if((parseInt(total/8)+1) == loadConfig.page){ &nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text- align:center; padding: 10px 0px; color:#fff; background:#00aa98; font- size: 16px; cursor:pointer;">加载完成</div>'); }else{ &nbsp;&nbsp;&nbsp; $('.yz_jiazai').html('<div style="width:100%; float:left; text- align:center; padding: 10px 0px; color:#fff; background:#00aa98; font- size: 16px; cursor:pointer;">点击加载'+loadConfig.page+'</div>'); }  

以上就是您们所需要的点击加载功能，样式可以自己调整到想要的样式！
作者：欣怡建站 挑错 时间：2020-01-12 08:12
☉首先声明，只要是我们的vip会员所有源码均可以免费下载，不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ(984818011)进行交流。
相关教程：
新手上路
织梦CMS
模板网站的优势
怎么购买模板
模板购买后怎么安装
业务介绍
织梦模板
织梦主机
广告投放
网站仿制
服务支持
支付方式
网站地图
程序环境介绍
版权与免责声明
售后服务
服务项目
技术教程
建议反馈
关于我们
关于欣怡建站
联系我们

版权声明:本站资源均来自互联网，如果侵犯了您的权益请与我们联系，我们将在24小时内删除。


Copyright © 2014- 欣怡建站 版权所有


在线客服