經(jīng)常會在手機(jī)app上看到列表頁面下來或者點(diǎn)擊的時候可以實(shí)現(xiàn)無限加載更多內(nèi)容的效果，今天說下在織夢網(wǎng)站中如何實(shí)現(xiàn)這個功能。

這個功能需要用到PHP和ajax技術(shù)。

首先找到并打開/plus/list.php文件，在里面找到如下代碼：

require_once(dirname(__FILE__)."/../include/common.inc.php");

在其下面添加如下代碼：

//列表頁瀑布流無限加載代碼
if(isset($_GET['ajax'])){
    $typeid = isset($_GET['typeid']) ? intval($_GET['typeid']): 0;//傳遞過來的分類ID
    $page = isset($_GET['page']) ? intval($_GET['page']): 0;//頁碼
    $pagesize = isset($_GET['pagesize']) ? intval($_GET['pagesize']): 15;//每頁多少條，也就是一次加載多少條數(shù)據(jù)
    $start = $page>0 ? ($page-1)*$pagesize : 0;//數(shù)據(jù)獲取的起始位置。即limit條件的第一個參數(shù)。
    $typesql = $typeid ? " WHERE typeid=$typeid" : '';//這個是用于首頁實(shí)現(xiàn)瀑布流加載，因?yàn)槭醉摷虞d數(shù)據(jù)是無需分類的，所以要加以判斷，如果無需
    $total_sql = "SELECT COUNT(id) as num FROM `dede_archives` $typesql ";
    $temp = $dsql->GetOne($total_sql);
    $total = 0;//數(shù)據(jù)總數(shù)
    $load_num =0;
    if(is_array($temp)){
        $load_num= round(($temp['num']-15)/$pagesize);//要加載的次數(shù),因?yàn)槟J(rèn)已經(jīng)加載了
        $total = $temp['num'];
    }
    $sql = "SELECT a.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
    t.namerule2,t.ispart, t.moresite,t.siteurl,t.sitepath
    FROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize";
    $dsql->SetQuery($sql);
    $dsql->Execute('list');
    $statu = 0;//是否有數(shù)據(jù)，默認(rèn)沒有數(shù)據(jù)
    $data = array();
    $index = 0;
    while($row = $dsql->GetArray("list")){
        $row['info'] = $row['info'] = $row['infos'] = cn_substr($row['description'],160);
        $row['id'] =  $row['id'];
        $row['filename'] = $row['arcurl'] = GetFileUrl($row['id'],
        $row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
        $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],
        $row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
        $row['typeurl'] = GetTypeUrl($row['typeid'],$row['typedir'],
        $row['isdefault'],$row['defaultname'],$row['ispart'],
        $row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
        if($row['litpic'] == '-' || $row['litpic'] == ''){
            $row['litpic'] = $GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
        }
        if(!preg_match("#^http:\/\/#i", $row['litpic']) &&$GLOBALS['cfg_multi_site'] == 'Y'){
            $row['litpic'] = $GLOBALS['cfg_mainsite'].$row['litpic'];
        }
        $row['picname'] = $row['litpic'];//縮略圖
        //$row['stime'] = GetDateMK($row['pubdate']);
        $row['stime'] = date('Y-m-d H:i', $row['pubdate']);
        $row['click'] = $row['click'];
        $row['typelink'] = "<a href='".$row['typeurl']."'>".$row['typename']."</a>";//分類鏈
        $row['fulltitle'] = $row['title'];//完整的標(biāo)題
        $row['shorttitle'] = $row['shorttitle'];//副標(biāo)題
        $row['title'] = cn_substr($row['title'], 80);//截取后的標(biāo)題
        $data[$index] = $row;
        $index++;
    }
    if(!empty($data)){
        $statu = 1;//有數(shù)據(jù)
    }
    $result =array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
    echo json_encode($result);//返回?cái)?shù)據(jù)
    exit();
}

在對應(yīng)的模板里引入jQuery文件。

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

在模板底部添加如下代碼：

<script>
    var loadConfig = {
        url_api: '/plus/list.php',
        typeid: {
            dede: field name = "typeid" /
        },
        page: 2,
        pagesize: 10, //這個就是滑動一次添加幾條信息的參數(shù)設(shè)置
        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('<div class="articleindexs">');
                arr.push('<div class="articleindexsimg fl"> <a href="' + data[i].arcurl + '"><img src="' + data[i].litpic + '"                arr.push('<h3><a href="' + data[i].arcurl + '" title="' + data[i].title + '">' + data[i].title + '</a></h3>');
                arr.push('<div class="articleindexifo"><span>' + data[i].stime + '</span><span>' + data[i].writer + '</span><span>' + data[i].click + '次</span></div>');
                arr.push('<p>' + data[i].description + '</p>');
                arr.push('</div>');

            }
            $('.articleindex-l').append(arr.join(''));
            loadConfig.load_num = rs.load_num;
            if (total < loadConfig.page * loadConfig.pagesize || loadConfig.page > loadConfig.load_num) {
                window.removeEventListener('srcoll', loadMoreApply, false);
            }
            loadConfig.page++;
            loadConfig.loading = 0;
        }
    }

    function pullLoad() {
        window.addEventListener('scroll', loadMoreApply, false);
    }
    pullLoad();
</script>

上面的代碼中的$('.articleindex-l').append(arr.join(''));里的articleindex-l對應(yīng)模板內(nèi)列表的外框class屬性。

    arr.push部分對應(yīng)的是列表中單篇文章的代碼。

    這樣就可以想要使用瀑布流無線加載了。

    如果在其它頁調(diào)用的話只需把代碼中的typeid:{dede:field name="typeid"/} 修改為typeid:5（5 就是我們要調(diào)用文章的欄目ID）即可。

注意：很多人在調(diào)試這個功能的時候可能把標(biāo)簽寫成了{(lán)dede:list pagesize='10'}{/dede:list} 要用{dede:arclist row="15"}{/dede:arclist}才可以，不然文章是加載不出來的！

“加載完成”的提示！

繼續(xù)在模板中找到：

if(total<loadConfig.page*loadConfig.pagesize || loadConfig.page > loadConfig.load_num){            
		window.removeEventListener('srcoll',loadMoreApply,false);
        }

在判斷語句的最后加上如下代碼:

$('<div>加載完成</div>').insertAfter('.jz_more');

到此，全部完成。