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="[field:arcurl/]" class="zzsz"></a>    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="[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="[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="[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>');    }

以上就是您们所需要的点击加载功能，样式可以自己调整到想要的样式！

文章版权声明 1、本站所有源码，软件均来自于网络，只作为学习交流之用，如有侵权，请联系
2、如有使用本站源码作为商用的，自行承担法律责任，本站建议如商用请使用原版。
3、本站不承诺所有源码为最新版，也不会承诺永久更新，永久技术支持之类。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
6、本站通用赞助货币为分享币FXB，所标价格并非源码价格，而且是为托管代码服务器提供赞助，请知悉！

THE END

织梦建站

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

请登录后发表评论