瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。采用瀑布流布局的网站 *** 作简单,在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。
瀑布流最实用于图片类的网站或者做淘客网站,这样的功能对用户体验极好,也能减少网站的跳出率,对优化也有好处,教大家如何在Dedecms织梦网站中使用这个功能:
一、找到并打开/plus/List.PHP文件,在里面找到如下代码(大概在第12行):
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 `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 = "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;//是否有数据,默认没有数据 $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['isdefault'],$row['defaultname'],$row['ispart'],$row['namerule2'],$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();} |
二、则在需要无限加载的模板引用jquery文件,如果网站模版中没有引用jquery文件,则引用下面这个Js代码,也可以把Js下载下来放你的网站加载,这里使用百度的外链,节省资源:
总结
以上是内存溢出为你收集整理的织梦利用Ajax实现瀑布流下拉无限加载(不带点击加载按钮)全部内容,希望文章能够帮你解决织梦利用Ajax实现瀑布流下拉无限加载(不带点击加载按钮)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)