位置: IT常识 - 正文
推荐整理分享dedecms瀑布流无限加载功能之点击加载(瀑布流样式),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:瀑布流js,瀑布流vue,h5瀑布流,div瀑布流,瀑布流vue,瀑布流js,瀑布流vue,div瀑布流,内容如对您有帮助,希望把文章链接给更多的朋友!
自从上次发表了DEDE瀑布流的加载方法后(https://www.bnxb.com/dedecms/26944.html) 有网友反映希望能加个,通过点击加载文章。
其实很简单,只要在之前的基础上再添加一些代码,修改一些参数就行,下面我把有改动的代码贴上,大家可以跟上一篇文章比对一下
下面的这段代码是加了最后一行!
<ul class="yz_xinwen">{dede:arclist row='8' titlelen='50'} <li> <div class="viewimg"> <div class="hotimgzz"></div> <a href="[field:arcurl/]" class="zzsz"></a> <a href="[field:arcurl/]" target="_blank" title="[field:fulltitle/]"> <img src="[field:litpic/]" alt="[field:fulltitle/]" width="250" height="165"/> </a> <div class="standpoint">[field:typelink/]</div> </div> <h3><a href="[field:arcurl/]" target="_blank"title="[field:fulltitle/]">[field:title/]</a></h3> <p>[field:description/]...</p> <span>[field:pubdate function="MyDate('Y-m-d H:i',@me)"/]</span> </li>{/dede:arclist}</ul><divclass="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 = { 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('<li>'); arr.push('<div class="viewimg">'); arr.push('<div class="hotimgzz"></div>'); arr.push('<a href="'+data[i].waparcurl+'" class="zzsz"></a>'); arr.push('<a href="'+data[i].waparcurl+'" target="_blank" title="'+data[i].title+'">'); arr.push('<img src="'+data[i].picname+'" alt="'+data[i].title+'" width="250" height="165"/>'); arr.push('</a>'); arr.push('<div class="standpoint"><a href="'+data[i].typeurl+'">'+data[i].typelink+'</a></div>'); arr.push('</div>'); arr.push('<h3><a href="'+data[i].waparcurl+'" target="_blank" title="'+data[i].title+'">'+data[i].title+'</a></h3>'); arr.push('<p>'+data[i].description+'...</p>'); arr.push('<span>'+data[i].stime+'</span>'); arr.push('</li>'); } $('.yz_xinwen').append(arr.join('')); loadConfig.load_num = rs.load_num; if((parseInt(total/8)+1) == loadConfig.page){ $('.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{ $('.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>'); } if(total<loadConfig.page*loadConfig.pagesize || loadConfig.page > loadConfig.load_num){ window.removeEventListener('click',loadMoreApply,false); } loadConfig.page++; loadConfig.loading = 0; }}function pullLoad(){ window.addEventListener('click', loadMoreApply, false); }pullLoad();</script>第一处修改的就是pagesize:8, 这个8最好跟上面的row=''这里面的数字同步
pagesize:8, //这个就是滑动一次添加几条信息的参数设置第二处修改的代码如下
if((parseInt(total/8)+1) == loadConfig.page){ $('.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{ $('.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>');}以上就是您们所需要的点击加载功能,样式可以自己调整到想要的样式!
免责
上一篇:python globals函数是什么?(python 函数 global)
下一篇:织梦同一页面调用多个相同的js联动菜单(织梦的首页怎么换图片)
友情链接: 武汉网站建设