dedecms利用ajax实现瀑布流下拉无限加载的教程jquery
发布时间：2021-07-02来源：www.fjxmjql.com 编辑：未知
广告位置（首页一通--图文）
织梦CMS用来做图片类的网站或者做淘客网站不少都需要用到无限加载这个功能，这个功能需要用到ajax，下面教大伙怎么样达成无限加载的瀑布流功能。
第一找到并打开/plus/list.php文件，在里面找到如下代码：
require_once./../include/common.inc.php);
在其下面添加如下代码：
if){$typeid = isset ? intval: 0;//传递过来的分类ID$page = isset ? intval: 0;//页码$pagesize = isset ? intval: 15;//每页多少条，也就是一次加载多少条数据$start = $page0 ? *$pagesize : 0;//数据获得的起始地方。即limit条件的第一个参数。$typesql = $typeid ? WHERE typeid=$typeid : ;//这个是用于首页达成瀑布流加载，由于首页加载数据是不需要分类的，所以要加以判断，假如不需要$total_sql = SELECT COUNT as num FROM `dede_archives` $typesql ;$temp = $dsql-GetOne;$total = 0;//数据总数$load_num =0;if){$load_num= round/$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.sitepathFROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize;$dsql-SetQuery;$dsql-Execute;$statu = 0;//是不是有数据，默认没数据$data = array;$index = 0;while){$row[info] = $row[info] = $row[infos] = cn_substr;$row[id] =$row[id];$row[filename] = $row[arcurl] = GetFileUrl;$row[typeurl] = GetTypeUrl;if{$row[litpic] = $GLOBALS[cfg_cmspath]./images/defaultpic.gif;}if $GLOBALS[cfg_multi_site] == Y){$row[litpic] = $GLOBALS[cfg_mainsite].$row[litpic];}$row[picname] = $row[litpic];//缩略图//$row[stime] = GetDateMK;$row[stime] = date;$row[click] = $row[click];$row[typelink] = .$row[typename].;//分类链$row[fulltitle] = $row[title];//完整的标题$row[shorttitle] = $row[shorttitle];//副标题$row[title] = cn_substr;//截取后的标题$data[$index] = $row;$index++;}if){$statu = 1;//有数据}$result =array;echo json_encode;//返回数据exit;}
在需要无限加载的模板里引用下面这个js代码，也可以把JS下载下来放你的网站加载，这里用百度的外部链接，节省资源：
script src=http://libs.baidu.com/jquery/1.9.0/jquery.js/script
并在模板底部添加如下代码：
nbsp;script type=text/javascriptvar loadConfig = {url_api:/plus/list.php,typeid:{dede:field name=typeid/},page:2,pagesize:15,//这个就是滑动一次添加几条信息的参数设置loading : 0,}functionloadMoreApply{if{ 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 = $.height, cHeight = document.documentElement.clientHeight; console.log; if {loadConfig.loading = 1; function ajax { $.ajax { addContent; }}); } ajax;}}}function addContent {if{var data = rs.list;var total = rs.total;var arr=[];var length = data.length;for{ arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push;}$.append);loadConfig.load_num = rs.load_num;if{ window.removeEventListener;}loadConfig.page++;loadConfig.loading = 0;}}function pullLoad{window.addEventListener;}pullLoadcheckMobile;/script
上面的代码中的$.append);里的yz_xinwen对应模板内列表的外框class属性。
arr.push部分对应的是列表中单篇文章的代码。
如此就可以想要用瀑布流无线加载了。
假如在其它页调用的话仅需把代码中的typeid:{dede:field name=typeid/} 修改为typeid:5（5 就是大家要调用文章的栏目ID）即可。
注意：大多数人在调试这个功能的时候可能把标签写成了{dede:list pagesize=10}{/dede:list} 要用{dede:arclist row=15}{/dede:arclist}才可以，不然文章是加载不出来的！
基于有的网友的需要添加了加载完成的提示！ 找到如下代码
if{nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; window.removeEventListener;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; }
在判断语句的最后加上如下代码！
$.insertAfter;
加上这段代码的意思是：当文章全部加载完的时候在所有文章最底部显示加载完成的提示！ 代码的意思是：在类为.yz_xinwen的标签下面插入 加载完成的DIV标签！如图：
另外在频道页，也就是带多个下级子栏目的频道页，这个代码还有点问题，需要修改plus.php.频道页做不到无限加载，是由于在文章表里面只有子栏目 typeid 而没且关联的父栏目 typeid 所以在查看文章 dede_archives 表的时候，父栏目 typeid 是没对应的文章。所以为知道决这个问题我在原来的基础上加了个判断，假如当传过来的 typeid 下有子栏目的时候调用该栏目下的所以子栏目文章。
下面我就把修改后的完整代码贴出来。
if){$typeid = isset ? intval: 0;//传递过来的分类ID$page = isset ? intval: 0;//页码$pagesize = isset ? intval: 15;//每页多少条，也就是一次加载多少条数据$start = $page0 ? *$pagesize : 0;//数据获得的起始地方。即limit条件的第一个参数。//获得频道栏目下的子栏目ID$yz_typeid = $dsql-GetOne as num FROM `dede_arctype` WHERE reid=$typeid );if{$sql = SELECT * FROM `dede_arctype` WHERE reid=$typeid;$dsql-SetQuery;$dsql-Execute;$typepdid = ;$yz = 1; while){ if{$typepdid .= ;}else{ $typepdid .= or ;$yz += 1;} }// echo $yz_typeid[num].+++.$typepdid; //exit;}else {$typepdid = typeid=$typeid;}$typesql = $typeid ? WHERE $typepdid : ;//这个是用于首页达成瀑布流加载，由于首页加载数据是不需要分类的，所以要加以判断，假如不需要$total_sql = SELECT COUNT as num FROM `dede_archives` $typesql ;$temp = $dsql-GetOne;$total = 0;//数据总数$load_num =0;if){$load_num= round/$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.sitepathFROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize;$dsql-SetQuery;$dsql-Execute;$statu = 0;//是不是有数据，默认没数据$data = array;$index = 0;while){$row[description] = cn_substr;$row[id] =$row[id];$row[filename] = $row[arcurl] = GetFileUrl;$row[typeurl] = GetTypeUrl;$row[waparcurl] = preg_replace,/,$row[arcurl]);if{$row[litpic] = $GLOBALS[cfg_cmspath]./images/defaultpic.gif;}if $GLOBALS[cfg_multi_site] == Y){$row[litpic] = $GLOBALS[cfg_mainsite].$row[litpic];}$row[picname] = $row[litpic];//缩略图//$row[stime] = GetDateMK;$row[stime] = date;$row[click] = $row[click];$row[typelink] = .$row[typename].;//分类链$row[fulltitle] = $row[title];//完整的标题$row[shorttitle] = $row[shorttitle];//副标题$row[title] = cn_substr;//截取后的标题$data[$index] = $row;$index++;}if){$statu = 1;//有数据}$result =array;echo json_encode;//返回数据exit;}
第一找到并打开/plus/list.php文件，在里面找到如下代码：
require_once./../include/common.inc.php);
在其下面添加如下代码：
if){$typeid = isset ? intval: 0;//传递过来的分类ID$page = isset ? intval: 0;//页码$pagesize = isset ? intval: 15;//每页多少条，也就是一次加载多少条数据$start = $page0 ? *$pagesize : 0;//数据获得的起始地方。即limit条件的第一个参数。$typesql = $typeid ? WHERE typeid=$typeid : ;//这个是用于首页达成瀑布流加载，由于首页加载数据是不需要分类的，所以要加以判断，假如不需要$total_sql = SELECT COUNT as num FROM `dede_archives` $typesql ;$temp = $dsql-GetOne;$total = 0;//数据总数$load_num =0;if){$load_num= round/$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.sitepathFROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize;$dsql-SetQuery;$dsql-Execute;$statu = 0;//是不是有数据，默认没数据$data = array;$index = 0;while){$row[info] = $row[info] = $row[infos] = cn_substr;$row[id] =$row[id];$row[filename] = $row[arcurl] = GetFileUrl;$row[typeurl] = GetTypeUrl;if{$row[litpic] = $GLOBALS[cfg_cmspath]./images/defaultpic.gif;}if $GLOBALS[cfg_multi_site] == Y){$row[litpic] = $GLOBALS[cfg_mainsite].$row[litpic];}$row[picname] = $row[litpic];//缩略图//$row[stime] = GetDateMK;$row[stime] = date;$row[click] = $row[click];$row[typelink] = .$row[typename].;//分类链$row[fulltitle] = $row[title];//完整的标题$row[shorttitle] = $row[shorttitle];//副标题$row[title] = cn_substr;//截取后的标题$data[$index] = $row;$index++;}if){$statu = 1;//有数据}$result =array;echo json_encode;//返回数据exit;}
在需要无限加载的模板里引用下面这个js代码，也可以把JS下载下来放你的网站加载，这里用百度的外部链接，节省资源：
script src=http://libs.baidu.com/jquery/1.9.0/jquery.js/script
并在模板底部添加如下代码：
nbsp;script type=text/javascriptvar loadConfig = {url_api:/plus/list.php,typeid:{dede:field name=typeid/},page:2,pagesize:15,//这个就是滑动一次添加几条信息的参数设置loading : 0,}functionloadMoreApply{if{ 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 = $.height, cHeight = document.documentElement.clientHeight; console.log; if {loadConfig.loading = 1; function ajax { $.ajax { addContent; }}); } ajax;}}}function addContent {if{var data = rs.list;var total = rs.total;var arr=[];var length = data.length;for{ arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push; arr.push;}$.append);loadConfig.load_num = rs.load_num;if{ window.removeEventListener;}loadConfig.page++;loadConfig.loading = 0;}}function pullLoad{window.addEventListener;}pullLoadcheckMobile;/script
上面的代码中的$.append);里的yz_xinwen对应模板内列表的外框class属性。
arr.push部分对应的是列表中单篇文章的代码。
如此就可以想要用瀑布流无线加载了。
假如在其它页调用的话仅需把代码中的typeid:{dede:field name=typeid/} 修改为typeid:5（5 就是大家要调用文章的栏目ID）即可。
注意：大多数人在调试这个功能的时候可能把标签写成了{dede:list pagesize=10}{/dede:list} 要用{dede:arclist row=15}{/dede:arclist}才可以，不然文章是加载不出来的！
基于有的网友的需要添加了加载完成的提示！ 找到如下代码
if{nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; window.removeEventListener;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp; }
在判断语句的最后加上如下代码！
$.insertAfter;
加上这段代码的意思是：当文章全部加载完的时候在所有文章最底部显示加载完成的提示！ 代码的意思是：在类为.yz_xinwen的标签下面插入 加载完成的DIV标签！如图：
另外在频道页，也就是带多个下级子栏目的频道页，这个代码还有点问题，需要修改plus.php.频道页做不到无限加载，是由于在文章表里面只有子栏目 typeid 而没且关联的父栏目 typeid 所以在查看文章 dede_archives 表的时候，父栏目 typeid 是没对应的文章。所以为知道决这个问题我在原来的基础上加了个判断，假如当传过来的 typeid 下有子栏目的时候调用该栏目下的所以子栏目文章。
下面我就把修改后的完整代码贴出来。
if){$typeid = isset ? intval: 0;//传递过来的分类ID$page = isset ? intval: 0;//页码$pagesize = isset ? intval: 15;//每页多少条，也就是一次加载多少条数据$start = $page0 ? *$pagesize : 0;//数据获得的起始地方。即limit条件的第一个参数。//获得频道栏目下的子栏目ID$yz_typeid = $dsql-GetOne as num FROM `dede_arctype` WHERE reid=$typeid );if{$sql = SELECT * FROM `dede_arctype` WHERE reid=$typeid;$dsql-SetQuery;$dsql-Execute;$typepdid = ;$yz = 1; while){ if{$typepdid .= ;}else{ $typepdid .= or ;$yz += 1;} }// echo $yz_typeid[num].+++.$typepdid; //exit;}else {$typepdid = typeid=$typeid;}$typesql = $typeid ? WHERE $typepdid : ;//这个是用于首页达成瀑布流加载，由于首页加载数据是不需要分类的，所以要加以判断，假如不需要$total_sql = SELECT COUNT as num FROM `dede_archives` $typesql ;$temp = $dsql-GetOne;$total = 0;//数据总数$load_num =0;if){$load_num= round/$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.sitepathFROM `dede_archives` as a JOIN `dede_arctype` AS t ON a.typeid=t.id $typesql ORDER BY id DESC LIMIT $start,$pagesize;$dsql-SetQuery;$dsql-Execute;$statu = 0;//是不是有数据，默认没数据$data = array;$index = 0;while){$row[description] = cn_substr;$row[id] =$row[id];$row[filename] = $row[arcurl] = GetFileUrl;$row[typeurl] = GetTypeUrl;$row[waparcurl] = preg_replace,/,$row[arcurl]);if{$row[litpic] = $GLOBALS[cfg_cmspath]./images/defaultpic.gif;}if $GLOBALS[cfg_multi_site] == Y){$row[litpic] = $GLOBALS[cfg_mainsite].$row[litpic];}$row[picname] = $row[litpic];//缩略图//$row[stime] = GetDateMK;$row[stime] = date;$row[click] = $row[click];$row[typelink] = .$row[typename].;//分类链$row[fulltitle] = $row[title];//完整的标题$row[shorttitle] = $row[shorttitle];//副标题$row[title] = cn_substr;//截取后的标题$data[$index] = $row;$index++;}if){$statu = 1;//有数据}$result =array;echo json_encode;//返回数据exit;}