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

名站网址导航为大驾家提供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>');

}

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

DEDECMS二级域名图片附件无法显示-图片绝对网址设置不生效的解决相关具体操作方法

关于DedeCMS站点程序站点教程相关的知识，就说到这里了希望能帮助朋友们。

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

宝贝市场2023-02-08

夺宝助手2023-02-08

查诚信2023-02-08

车价天天报2023-02-08

考勤助理小程序2023-02-08

汽车报价大全查询2023-02-08