织梦dedecms首页列表页ajax无限下拉加载瀑布流效果-CMS教程

在用到dedecms织梦建站时候，需要实现无限下拉加载文章功能。这个要怎么操作呢？一、首先找到并打开/plus/list.php文件，在里面找到如下代码： require_once(dirname(__FILE__)."/../include/common.inc.php"); 在这段代码下面添加以下代码： //列表页瀑布流无限加

在用到dedecms 织梦建站时候，需要实现无限下拉加载文章功能。这个要怎么操作呢？
一、首先找到并打开/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; //每页多少条，也就是一次加载多少条数据
     $start  =  $page >0 ? ( $page -1)* $pagesize  : 0; //数据获取的起始位置。即limit条件的第一个参数。
     $typesql  =  $typeid  ?  " WHERE typeid=$typeid"  :  '' ; //这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需
     $total_sql  =  "SELECT COUNT(id) as num FROM `wmd_archives` $typesql " ;
     $temp  =  $dsql ->GetOne( $total_sql );
     $total  = 0; //数据总数
     $load_num  =0;
     if ( is_array ( $temp )){
         $load_num =  round (( $temp [ 'num' ]-15)/ $pagesize ); //要加载的次数,因为默认已经加载了
         $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 `wmd_archives`  as  a JOIN `wmd_arctype` AS t ON a.typeid=t.id  $typesql  ORDER BY id DESC LIMIT  $start , $pagesize ";
     $dsql ->SetQuery( $sql );
     $dsql ->Execute( 'list' );
     $statu  = 0; //是否有数据，默认没有数据
     $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' ] =  "" . $row [ 'typename' ]. "" ; //分类链
         $row [ 'fulltitle' ] =  $row [ 'title' ]; //完整的标题
         $row [ 'shorttitle' ] =  $row [ 'shorttitle' ]; //副标题
         $row [ 'title' ] = cn_substr( $row [ 'title' ], 80); //截取后的标题
         $data [ $index ] =  $row ;
         $index ++;
     }
     if (! empty ( $data )){
         $statu  = 1; //有数据
     }
     $result  = array ( 'statu' => $statu , 'list' => $data , 'total' => $total , 'load_num' => $load_num );
     echo  json_encode( $result ); //返回数据
     exit ();
}

二、然后在需要使用瀑布流无线加载的织梦dedecms模板里引用下面这个js代码（这个js大家应该不是很陌生，只要有用到JQ库函数的话一定要引用这个js）：

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

三、并在模板底部添加以下代码：

<script type="text/javascript">
var  loadConfig = {
                 url_api: '/plus/list.php' ,
                 typeid:{dede:field name= "typeid" /},
                 page:2,
                 pagesize:15,   //这个就是滑动一次添加几条信息的参数设置
                 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( '<a href="' +data[i].arcurl+ '" title="' +data[i].title+ '">' );
             arr.push( '<dl class="yz_card">' );
             arr.push( '<dt class="yz_card_dt">' );
             arr.push( '<img src="' +data[i].picname+ '" alt="' +data[i].title+ '">' );
             arr.push( '</dt>' );
             arr.push( '<dd class="yz_card_dd">' );
             arr.push( '<p class="yz_card_p">' +data[i].title+ '</p>' );
             arr.push( '<div class="yz_card_icon">' );
             arr.push( '<span class="yz_comment">' );
             arr.push(data[i].click);                            
             arr.push( '<em class="yz_icon_comment"><img src="/templets/default/images/pingluan.png" height="14"></em>' );
             arr.push( '</span>' );
             arr.push( '</div>' );
             arr.push( '<div class="yz_datetime">' +data[i].stime+ '</div>' );
             arr.push( '</dd>' );
             arr.push( '</dl>' );
             arr.push( '</a>' );
         }
         $( ' .arclist ' ).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>

上面的代码中的$('.arclist').append(arr.join(''));里的arclist对应模板内列表的外框class属性，这个就是说列表页要加载时候要有一个触发机制，这个机制就是用这个class属性。
arr.push部分对应的是列表中单篇文章的代码。
到此织梦dedecms瀑布流无限加载就实现了，这个只是一个demo例子，比如无限加载文章的样式这些需要自己做一些修改，有需要的朋友可以研究下！

基础教程推荐