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

自从上次发表了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>

<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>');

}

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