织梦DedeCMS瀑布流无限加载功能之点击加载

自从上次发表了DEDE瀑布流的加载方法后（https://www.bnxb.com/DedeCMS/26944.html） 有网友反映希望能加个，通过点击加载文章。
其实很简单，只要在以前的基础上再添加一些代码，修改一些参数就行，下面把有改动的代码贴上，大伙可以跟上一篇文章比对一下
下面的这段代码是加了最后一行！

{dede:arclist row='8' titlelen='50'} 
 
 
     
[field:typelink/]
 
 
[field:title/]
 
[field:description/]...
 [field:pubdate function="MyDate('Y-m-d H:i',@me)"/] 
{/dede:arclist}
加载更多1

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

var loadConfig = { url_api:'/plus/list.php', typeid:{dede:field name="typeid"/}, page:2, pagesize:8, //这个就是滑动一次添加几条信息的参数设置 loading : 0,}function loadMoreApply(){ if(loadConfig.loading == 0){ var typeid = loadConfig.typeid; var page = loadConfig.page; var pagesize = loadConfig.pagesize; var url = loadConfig.url_api,data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize}; var sTop = document.body.scrollTop || document.documentElement.scrollTop, dHeight = $(document).height(), cHeight = document.documentElement.clientHeight; console.log(dHeight); if (sTop + cHeight >= dHeight - cHeight) { loadConfig.loading = 1; function ajax(url, data) { $.ajax({url: url,data: data,async: false,type: 'GET',dataType: 'json',success: function(data) { addContent(data); }}); } ajax(url,data); } }}function addContent (rs){ if(rs.statu== 1){ var data = rs.list; var total = rs.total; var arr=[]; var length = data.length; for(var i=0;i<length;i++){ arr.push('
'); arr.push('
'); arr.push('
'); arr.push(''); arr.push(''); arr.push(''); arr.push(''); arr.push('
'+data[i].typelink+'
'); arr.push('
'); arr.push('
'+data[i].title+'
'); arr.push('
'+data[i].description+'...
'); arr.push(''+data[i].stime+''); arr.push('
'); } $('.yz_xinwen').append(arr.join('')); loadConfig.load_num = rs.load_num; if((parseInt(total/8)+1) == loadConfig.page){ $('.yz_jiazai').html('
加载完成
'); }else{ $('.yz_jiazai').html('
点击加载'+loadConfig.page+'
'); } if(total loadConfig.load_num){ window.removeEventListener('click',loadMoreApply,false); } loadConfig.page++; loadConfig.loading = 0; }}function pullLoad(){ window.addEventListener('click', loadMoreApply, false);}pullLoad();

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

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

第二处修改的代码如下

if((parseInt(total/8)+1) == loadConfig.page){ $('.yz_jiazai').html('
加载完成
');}else{ $('.yz_jiazai').html('
点击加载'+loadConfig.page+'
');}

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