详解织梦模板DEDE首页列表页AJAX无限加载瀑布流修正版

详解织梦模板DEDE首页列表页AJAX无限加载瀑布流修正版

本文主要介绍AJAX无限加载瀑布流的修订版，DEDE的首页列表页面，详细的织梦模板。边肖觉得挺好的，就跟大家分享一下，给大家一个参考。来和边肖一起看看吧。

最近在学javascript，刚开始了解JS代码。本文研究了HTML前台的AJAX加载技术。比如博客站或者图片站使用AJAX异步无限加载，做成瀑布，提高用户体验。这就是AJAX异步加载的优势。

异步加载的缺点:属于WEB前端技术，蜘蛛无法掌握JS调用的内容，不利于SEO优化。所以，如果要使用这个函数，最好是直接调用一部分，用AJAX异步加载另一部分。

接下来我们用织梦做AJAX异步加载WEB前端开发。网上有很多教程，笔者整理了一下，给出了详细的讲解，修改后分享给大家。

打开/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?"WHEREtypeid=$typeid":'';//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需 $total_sql="SELECTCOUNT(id)asnumFROM`dede_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="SELECTa.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule, t.namerule2,t.ispart,t.moresite,t.siteurl,t.sitepath FROM`dede_archives`asaJOIN`dede_arctype`AStONa.typeid=t.id$typesqlORDERBYidDESCLIMIT$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'].'/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['typelink']="<ahref='".$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); echojson_encode($result);//返回数据 exit(); }

向模板文件添加内容

在……里

<scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <scripttype="text/javascript"> varloadConfig={ url_api:'{dede:global.cfg_cmspath/}/plus/list.php',//修正plus目录 typeid:{dede:fieldname='typeid'/},//首页此处是typeid:0, page:2, pagesize:3, loading:0, } functionloadMoreApply(){ if(loadConfig.loading==0){ vartypeid=loadConfig.typeid; varpage=loadConfig.page; varpagesize=loadConfig.pagesize; varurl=loadConfig.url_api,data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize}; varsTop=document.body.scrollTop||document.documentElement.scrollTop,dHeight=$(document).height(),cHeight=document.documentElement.clientHeight; console.log(dHeight); if(sTop+cHeight>=dHeight-cHeight){ loadConfig.loading=1; functionajax(url,data){ $.ajax({url:url,data:data,async:false,type:'GET',dataType:'json',success:function(data){ addContent(data); }}); } ajax(url,data); } } } functionaddContent(rs){ if(rs.statu==1){ vardata=rs.list; vartotal=rs.total; vararr=[]; varlength=data.length; for(vari=0;i<length;i++){ arr.push('<li>'); arr.push('<ahref="'+data[i].arcurl+'"class="preview">'); arr.push('<imgclass=""width=""height=""alt="data[i].title"src="'+data[i].picname+'"/>'); arr.push('</a>'); arr.push('['+data[i].typelink+']'); arr.push('<ahref="'+data[i].arcurl+'"class="title">'+data[i].title+'</a>'); arr.push('</li>'); } $('.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; } } functionpullLoad(){ window.addEventListener('scroll',loadMoreApply,false); } pullLoad(); </script>

首页上的HTML代码示例

注意:首页模板标注的是arclist，使用的row='3'是三个初始调用；模板标记为list，pagesize=“3”。

<divclass="listbox"> <ulclass="e2"> <divclass="data-list"> {dede:arclistrow='3'} <li>[field:arrayrunphp='yes']@me=(empty(@me['litpic'])?"":"<ahref='{@me['arcurl']}'class='preview'><imgsrc='{@me['litpic']}'/></a>");[/field:array] [[field:typelink/]]<ahref="[field:arcurl/]"class="title">[field:title/]</a><spanclass="info"><small>日期：</small>[field:pubdatefunction="GetDateTimeMK(@me)"/]<small>点击：</small>[field:click/]<small>好评：</small>[field:scores/]</span> <pclass="intro">[field:description/]...</p> </li> {/dede:arclist} </div><!--data-list--> </ul> </div> <!--/listbox-->

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。