自从上次发表了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=http://www.dede58.com/"[field:arcurl/]" class="zzsz"></a>
<a href=http://www.dede58.com/"[field:arcurl/]" target="_blank" title="[field:fulltitle/]">
<img src=http://www.dede58.com/"[field:litpic/]" alt="[field:fulltitle/]" width="250" height="165"/>
</a>
<div class="standpoint">[field:typelink/]</div>
</div>
<h3><a href=http://www.dede58.com/"[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>
<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 = {
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>');
}
以上就是您们所需要的点击加载功能,样式可以自己调整到想要的样式!
dedecms瀑布流无限加载功能之点击加载
内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:https://www.heiqu.com/73cf669007d1bcb41ec33691e89fdb32.html