很多用企业建站dedecms做图片类的网站都需要用到无限加载这个功能，这个功能需要用到ajax，下面我就告诉大家如何实现这样的功能。

 

首先找到并打开/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 `tufei_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 `tufei_archives` as a JOIN `tufei_arctype` AS t ON a.typeid
									=t.id    $typesql ORDER BY id DESC LIMIT $start,$pagesize"; 
									
								
							
							

								
									//echo "$sql"; 
								
							
							

								
									   $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'].'inc/pic/1-1F5301S915S8.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['typelink'] = "<
									a
									 
									href
									='".$row['typeurl
									']."'
									>
									".$row['typename']."
									</
									a
									>
									";//分类链 
									
								
							
							

								
									  $row['fulltitle'] = $row['title'];//完整的标题 
								
							
							

								
									  $row['shorttitle'] = $row['shorttitle'];//副标题 
								
							
							

								
									  $row['title'] = cn_substr($row['title'], 60);//截取后的标题 
								
							
							

								
									   $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(); 
								
							
							

								
									} 
								
							
						

 

然后在需要使用无线加载的模板里引用下面这个js代码：

						

							

								
									
										<
									script
									 
									src
									=
									"inc/js/jquery.js"
									>
									</
									script
									>
									 
									
								
							
						

 

并在底部添加如下代码：

						

							

								
									
										<
									script
									 
									type
									=
									"text/javascript"
									>
									 
									
								
							
							

								
									var loadConfig
									 = { 
									
								
							
							

								
									                url_api:'/plus/list.php', 
								
							
							

								
									                typeid:0, 
								
							
							

								
									                page:2, 
								
							
							

								
									                pagesize:3, 
								
							
							

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

								
									            arr.push('<
									div
									 
									class
									=
									"item"
									>
									'); 
									
								
							
							

								
									            arr.push('<
									div
									 
									class
									=
									"thumbnail"
									>
									'); 
									
								
							
							

								
									            arr.push('<
									img
									 
									class
									=
									"img-responsive"
									 
									src
									=
									"'+data[i].picname+'"
									 
									width
									=
									460
									 
									height
									=
									255
									 
									/>
									'); 
									
								
							
							

								
									            arr.push('</
									div
									>
									'); 
									
								
							
							

								
									            arr.push('<
									div
									 
									class
									=
									"caption"
									>
									'); 
									
								
							
							

								
									            arr.push('<
									h3
									>
									'+data[i].title+'
									</
									h3
									>
									'); 
									
								
							
							

								
									            arr.push('<
									div
									 
									class
									=
									"place"
									>
									'+data[i].shorttitle+'
									</
									div
									>
									'); 
									
								
							
							

								
									            arr.push('</
									div
									>
									'); 
									
								
							
							

								
									            arr.push('</
									div
									>
									'); 
									
								
							
							

								
									            arr.push('</
									a
									>
									'); 
									
								
							
							

								
									                     
								
							
							

								
									        } 
								
							
							

								
									        $('.data-list').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() 
								
							
							

								
									checkMobile(); 
								
							
							

								
									 
								
							
							

								
									
										</
									script
									>
									 
									
								
							
						

 

上面的代码中的”$('.data-list').append(arr.join(''));“里的”data-list“对应模板内列表的外框class属性。

arr.push部分对应的是列表代码，

这样就可以使用无线加载了。

如果在列表页只需把代码中的”typeid:0,“ 修改为”typeid:{dede:field name="typeid"/},“即可。