织梦dedecms首页列表页,javascript ajax点击加载更多,瀑布流,首页多栏目切换

互联网
叶子小小的，碧绿碧绿的，花儿小小的，好可爱。紫红色的玫瑰花在风中翩翩起舞，玫瑰花树枝上还有调皮又可爱的小刺，你可要当心哦！你看，那个大仙人球旁围着8个小仙人球，好像一家人聚在一起，多欢快呀！

简化部分主要是栏目切换时,除子第一个默认栏目,其它的全改成ajax,不再生成静态页,而且通过PHP循环,简化了代码.另外加载更多按钮等也修改了触发形式.

效果图

一,模板

模板中涉及一个函数.get_url_by_typeid2()在这里的说明,点击查看

[html]view plaincopy
  1. <divclass="containermargin-topover-hidden">
  2. <divclass="xl12xb12over-hidden">
  3. <!--切换标签-->
  4. <styletype="text/css">
  6. .slideTxtBox{width:100%;text-align:left;}
  7. .slideTxtBox.hd{height:38px;line-height:27px;position:relative;overflow:hidden}
  8. .slideTxtBox.hdul{left:10px;float:left;position:absolute;top:3px;height:39px;over-flow:hidden;}
  9. .slideTxtBox.hdulli{height:40px;float:left;color:#fff;padding:0px7px0px6px;cursor:pointer;}
  10. .slideTxtBox.hdullia{color:#fff;}
  11. .slideTxtBox.hdulli.on
  12. {background:url({dede:global.cfg_templets_skin/}/images/bg5.png)repeat-x;}
  13. .slideTxtBox.hdulli.ona{color:#555}
  14. .slideTxtBox.bdul{zoom:1;padding-bottom:50px;display:none;position:relative;min-height:100px}
  15. .slideTxtBox.bdli{height:24px;line-height:24px;}
  19. </style>
  22. <divid="slideTxtBox"class="slideTxtBoxpadding00"style="overflow:visible!important;">
  23. <!--主导航-->
  24. <divclass="hdbg-mainpr">
  25. <ulid="tab"class="border-topborder-mainborder-big">
  26. <liclass="on"id=""><ahref="javascript："onclick="javascript：loadMoreApply(1,0);">全部</a></li>
  28. {dede:channeltype='top'row='50'}
  29. <liid="tab[field:id/]"><ahref="javascript："onclick="javascript：change_tab([field:id/]);loadMoreApply(1,[field:id/]);">[field:typename/]</a></li>
  30. {/dede:channel}
  34. </ul>
  36. <spanclass="icon-angle-downtext-whitewidth30padding-left10ibtext-22top7right2bg-main"data-target="#navbar2">
  37. </span>
  38. </div>
  39. <!--下拉导航-->
  41. <divclass="navbar-bodymargin-top6hiddenib"id="navbar2">
  42. <ulclass="navnav-inlinenav-menu">
  43. {dede:channelartlisttypeid="top"row='33'}
  44. <liclass="{dede:field.active/}">
  45. <ahref="javascript："onclick="javascript：change_tab({dede:field.typeid/});loadMoreApply(1,{dede:field.typeid/});">
  46. {dede:fieldname="typename"/}
  47. </a>
  48. </li>
  49. {/dede:channelartlist}
  50. </ul>
  51. </div>
  52. <divclass="bd"id="slideTxtBox-bd">
  54. <ulid="0"class="show">
  55. <!--全部-->
  57. {dede:arclistrow='2'titlelen='100'orderby='id'}
  58. <divclass="bg-fffwidth-100ibpr">
  59. <divclass="xl12padding10">
  60. <divclass="mediamedia-x">
  61. <aclass="float-left"href="[field:arcurl/]">
  62. <imgsrc="[field:litpic/]"width="80"class="radius"alt="[field:title/]">
  63. </a>
  64. <divclass="media-body"style="width:900px;height:;">
  65. <strong>[field:title/]</strong>
  66. <divstyle="height:5px;"></div>
  67. <!--点击-->
  68. <span>
  69. <spanclass="cursoricon-click"></span>
  70. <scriptsrc="/plus/count_list.php?view=yes&aid=[field:id/]"type='text/javascript'language="javascript"></script></span>
  72. <spanid="diggNum[field:id/]"><ahref="javascript："class="text-bbbtext-16width33"onclick="javascript：postDigg('good',[field:id/])"><spanid="digg[field:id/]"class="icon-heart2"></span></a>[field:goodpost/]
  73. </span>
  74. <divstyle="height:12px;"></div>
  75. <!--所属分类archives-->
  76. <aclass="buttonbg-graybutton-littleradius-nonemargin-right2text-12"href="javascript："onclick="javascript：change_tab([field:typeid/]);loadMoreApply(1,[field:typeid/]);">[field:typename/]</a>[field:typeid2function="get_url_by_typeid2(@me)"/]
  77. </div>
  78. </div>
  79. </div>
  80. <aclass="buttonbg-mainbutton-smallright5text-whiteibpatext-14"href="javascript：;"onclick="showtip('[field:title/]')"style="top:40px">进入小程序</a>
  81. </div>
  82. {/dede:arclist}
  84. <pclass="text-centermargin-bottombottom0rightwidth-100"><aonclick="javascript：loadMoreApply(1,0);"href="javascript："class="buttonradius-roundedborder-main"id="0data">加载更多</a></p>
  85. </ul>
  88. {dede:channeltype='top'row='25'}
  89. <!--[field:typename/]-->
  90. <ulid="[field:id/]">
  91. <pclass="text-centerbottom0margin-bottommargin-big-topwidth-100"><aonclick="javascript：loadMoreApply(1,[field:id/]);"href="javascript："class="buttonradius-roundedborder-main"id="[field:id/]data">加载更多</a></p>
  92. </ul>
  93. {/dede:channel}
  95. </div>
  98. </div>
  99. <!--slideTxtBoxend-->
  100. <scripttype="text/javascript">
  101. vartabs=document.getElementById("tab").getElementsByTagName("li");
  102. vardivs=document.getElementById("slideTxtBox-bd").getElementsByTagName("ul");
  103. for(vari=0;i<tabs.length;i++){
  104. tabs[i].onclick=function(){change(this);}
  105. }
  106. functionchange(obj){
  107. for(vari=0;i<tabs.length;i++)
  108. {
  109. if(tabs[i]==obj){
  110. tabs[i].className="on";
  111. divs[i].className="show";
  112. }
  113. else{
  114. tabs[i].className="";
  115. divs[i].className="";
  116. }
  117. }
  118. }
  121. //所属分类切换
  122. functionchange_tab(typeid){
  124. $("#tab"+typeid).siblings("li").removeClass("on");
  126. $("#tab"+typeid).addClass("on");
  128. $("#"+typeid).siblings("ul").removeClass("show");
  130. $("#"+typeid).addClass("show");
  132. }
  135. </script>
  136. <!--切换结束-->
  139. </div>
  142. </div>
  143. <scripttype="text/javascript">
  145. $('.icon-angle-down').each(function(){
  146. vare=$(this);
  147. vartarget=e.attr("data-target");
  148. e.click(function(){
  149. $(target).toggleClass("hidden");
  150. });
  151. });
  153. varloadConfig={
  154. url_api:'/plus/list.php',
  155. //typeid:{dede:fieldname="typeid"/},
  156. pagesize:2,
  157. loading:0
  158. }
  159. varpage0=2;
  162. {dede:channeltype='top'row='25'}
  163. varpage[field:id/]=1;
  164. {/dede:channel}
  167. functionloadMoreApply(orderby,typeid){
  168. $("#navbar2").addClass("hidden");
  169. eval("page=page"+typeid+";");
  171. varpagesize=loadConfig.pagesize;
  172. varurl=loadConfig.url_api,
  173. data={ajax:'pullload',typeid:typeid,page:page,pagesize:pagesize,orderby:orderby};
  174. functionajax(url,data){
  175. $.ajax({url:url,data:data,async:false,type:'GET',dataType:'json',success:function(data){
  177. addContent(data,typeid);
  179. }});
  181. }
  182. ajax(url,data);
  183. }
  184. functionaddContent(rs,typeid){
  185. if(rs.statu==1){
  186. vardata=rs.list;
  187. vartotal=rs.total;
  188. vararr=[];
  189. varlength=data.length;
  190. for(vari=0;i<length;i++){
  193. arr.push('<divclass="bg-fffwidth-100ibpr">');
  194. arr.push('<divclass="xl12padding10"><divclass="mediamedia-x"><aclass="float-left"href="'+data[i].arcurl+'"><imgsrc="'+data[i].picname+'"width="80"class="radius"alt="'+data[i].title+'"></a><divclass="media-body"style="width:900px"><strong>'+data[i].title+'</strong><divstyle="height:5px;"></div><span><spanclass="cursoricon-click"></span>'+data[i].click+'</span>');
  195. arr.push('<spanid="diggNum'+data[i].id+'"><ahref="javascript："class="text-bbbtext-16"onclick="javascript：postDigg(\&;good\&;,'+data[i].id+');"><spanid="digg'+data[i].id+'"class="icon-heart2"></span></a>'+data[i].goodpost+'</span><divstyle="height:12px;"></div>');
  198. arr.push('<aclass="buttonbg-graybutton-littleradius-nonemargin-right2text-12"href="javascript："onclick="javascript：change_tab('+data[i].typeid+');loadMoreApply(1,'+data[i].typeid+');">'+data[i].typename+'</a>'+data[i].typeid2+'</div></div></div><aclass="buttonbg-mainbutton-smallright5text-whiteibpatext-14"href="javascript：;"onclick="showtip(\&;'+data[i].title+'\&;)"style="top:40px">进入小程序</a></div>');
  200. }
  202. $('#'+typeid).append(arr.join(''));
  204. loadConfig.load_num=rs.load_num;
  205. if(total<page*loadConfig.pagesize||page>loadConfig.load_num){
  206. //$('#'+typeid).append('<pclass="text-centermargin-top"><ahref="javascript："class="buttonradius-roundedborder-mainwidth-20"id="'+typeid+'data">没有了!</a></p>');
  207. $("#"+typeid+"data").html('没有了!');
  208. }else{
  210. //$('#'+typeid).append('<pclass="text-centermargin-top"><ahref="javascript："class="buttonradius-roundedborder-mainwidth-20"id="'+typeid+'data">加载更多</a></p>');
  211. }
  213. eval("page"+typeid+"++;");
  214. }else{
  215. $("#"+typeid+"data").html('没有了!');
  216. }
  218. }
  221. $(document).ready(function(){
  223. loadMoreApply(1,0);
  224. $('.copy-lay.close2').click(function(){
  225. $('.alert2').hide();
  226. });
  227. $('.alert2').click(function(e){
  228. if($(e.target).parents().hasClass('copy-lay')){
  229. return;
  230. }else{
  231. $(this).hide();
  232. }
  233. });
  234. });
  235. functionshowtip(title){
  236. $('#alerttip,#copyBtn').html(title);
  237. $('.alert2').show();
  238. }
  243. </script>
  244. {dede:sqlsql='Select*from`myppttype`whereid=2'}
  245. <divclass="alert2alert-copy">
  246. <divclass="copy-lay"style="[field:other/]">
  247. <spanclass="close2"></span>
  248. <divclass="copy"id="copyBtn"></div>
  249. <divclass="copy-layer-img"style="background:url('[field:pic/]')no-repeat;-o-background-size:contain;background-size:contain;"></div>
  250. </div>
  251. </div>
  252. {/dede:sql}

二,,修改,plus/list.PHP在require_once(dirname(__FILE__)."/../include/common.inc.php");

的下面增加一段

[php]view plaincopy
  1. if(isset($_GET['ajax'])){
  2. $typeid=isset($_GET['typeid'])?intval($_GET['typeid']):0;//传递过来的分类ID
  3. $orderby=isset($_GET['orderby'])?intval($_GET['orderby']):1;
  4. //print_r($orderby);exit;
  5. //1id排,2hot排序
  6. $page=isset($_GET['page'])?intval($_GET['page']):0;//页码
  7. $pagesize=isset($_GET['pagesize'])?intval($_GET['pagesize']):10;//每页多少条，也就是一次加载多少条数据
  8. $start=$page>0?($page-1)*$pagesize:0;//数据获取的起始位置。即limit条件的第一个参数。
  10. $ntime2=gmmktime(0,0,0,gmdate('m'),gmdate('d'),gmdate('Y'));
  11. $limitday=$ntime2-(40*24*3600);//40天内热文
  12. $orwheres="senddate>$limitday";
  14. //$typesql=$typeid?"WHEREtypeid=$typeid":'';
  16. if($orderby==1){//id降序
  17. $typesql=$typeid?"WHEREa.arcrank=0anda.typeid=$typeidorCONCAT(',',a.typeid2,',')LIKE'%,".$typeid.",%'":'';
  18. $typesql3=$typeid?"WHEREarcrank=0andtypeid=$typeidorCONCAT(',',typeid2,',')LIKE'%,".$typeid.",%'":'';
  19. }else{//hot排序
  21. $typesql=$typeid?"WHEREa.arcrank=0anda.typeid=$typeidorCONCAT(',',a.typeid2,',')LIKE'%,".$typeid.",%'and".$orwheres:"WHERE".$orwheres;
  22. $typesql3=$typeid?"WHEREarcrank=0andtypeid=$typeidorCONCAT(',',typeid2,',')LIKE'%,".$typeid.",%'and".$orwheres:"WHERE".$orwheres;
  24. }
  25. //print_r($typesql);exit;
  26. //这个是用于首页实现瀑布流加载，
  27. //因为首页加载数据是无需分类的，所以要加以判断，如果无需
  28. $total_sql="SELECTCOUNT(id)asnumFROM`archives`$typesql3";
  29. $temp=$dsql->GetOne($total_sql);
  31. $total=0;//数据总数
  32. $load_num=0;
  33. if(is_array($temp)){
  34. $load_num=round(($temp['num']-$pagesize)/$pagesize);//要加载的次数,因为默认已经加载了
  35. $total=$temp['num'];
  36. }
  37. //print_r($total);exit;
  43. if($orderby==1){//新
  44. $sql="SELECTa.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
  45. t.namerule2,t.ispart,t.moresite,t.siteurl,t.sitepath
  46. FROM`archives`asaJOIN`arctype`AStONa.typeid=t.id$typesqlORDERBYa.idDESCLIMIT$start,$pagesize";
  47. }else{//热门
  51. $sql="SELECTa.*,t.typedir,t.typename,t.isdefault,t.defaultname,t.namerule,
  52. t.namerule2,t.ispart,t.moresite,t.siteurl,t.sitepath
  53. FROM`archives`asaJOIN`arctype`AStONa.typeid=t.id$typesqlORDERBYa.clickDESCLIMIT$start,$pagesize";
  54. }
  55. //echo"$sql";exit;
  56. $dsql->SetQuery($sql);//
  57. $dsql->Execute('list');//die(mysql_error());
  58. $statu=0;//是否有数据，默认没有数据
  59. $data=array();
  60. $index=0;
  61. while($row=$dsql->GetArray("list")){
  62. $row['info']=$row['info']=$row['infos']=cn_substr($row['description'],250);
  63. $row['id']=$row['id'];
  64. $row['typeid2']=get_url_by_typeid2($row['typeid2']);
  65. $row['filename']=$row['arcurl']=GetFileUrl($row['id'],$row['typeid'],$row['senddate'],$row['title'],$row['ismake'],
  66. $row['arcrank'],$row['namerule'],$row['typedir'],$row['money'],$row['filename'],$row['moresite'],$row['siteurl'],$row['sitepath']);
  68. $row['typeurl']=GetTypeUrl($row['typeid'],$row['typedir'],$row['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$row['moresite'],$row['siteurl'],$row['sitepath']);
  70. if($row['litpic']=='-'||$row['litpic']==''){
  71. $row['litpic']=$GLOBALS['cfg_cmspath'].'/images/defaultpic.gif';
  72. }
  74. if(!preg_match("#^http:\/\/#i",$row['litpic'])&&$GLOBALS['cfg_multi_site']=='Y'){
  75. $row['litpic']=$GLOBALS['cfg_mainsite'].$row['litpic'];
  76. }
  77. $row['picname']=$row['litpic'];//缩略图
  78. $row['writer']=$row['writer'];
  79. $row['click']=$row['click'];
  80. $row['stime']=GetDateMK($row['pubdate']);
  81. $row['timeago']=timeago($row['pubdate']);
  82. $row['typelink']="<arel="nofollow noopener noreferrer" href='".$row['typeurl']."'>".$row['typename']."</a>";//分类链
  83. $row['fulltitle']=$row['title'];//完整的标题
  84. $row['shorttitle']=$row['shorttitle'];//副标题
  85. $row['title']=cn_substr($row['title'],60);//截取后的标题
  86. $data[$index]=$row;
  87. $index++;
  88. }
  89. if(!empty($data)){
  90. $statu=1;//有数据
  91. }
  92. $result=array('statu'=>$statu,'list'=>$data,'total'=>$total,'load_num'=>$load_num);
  93. echojson_encode($result);//返回数据
  94. exit();
  95. }

以上就是织梦dedecms首页列表页,javascript ajax点击加载更多,瀑布流,首页多栏目切换。人生短短多少十，不要给本人留下了什么遗憾，想笑就笑，想哭就哭，该爱的时候就去爱，无谓压抑自己。更多关于织梦dedecms首页列表页,javascript ajax点击加载更多,瀑布流,首页多栏目切换请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
dedecms如何实现任意页面调用当前会员信息的方
DedeCMS织梦判断是否有二级栏目输出HTML代码
织梦dedecms dede:arclist输出取消换行符
dedecms文章添加字段填栏目id，内容页调用字段里的栏目文章
dedeCMS首页列表页文章页调用tag的方法