织梦利用Ajax实现瀑布流下拉无限加载(不带点击加载按钮)

织梦利用Ajax实现瀑布流下拉无限加载(不带点击加载按钮),第1张

概述瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest,逐渐在国内流行开来。国内大多数清新站基本为这类风格。

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是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实现瀑布流下拉无限加载(不带点击加载按钮)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/1053073.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存