瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。采用瀑布流布局的网站操作简单，在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。

瀑布流最实用于图片类的网站或者做淘客网站，这样的功能对用户体验极好，也能减少网站的跳出率，对优化也有好处，今天余斗教大家如何在织梦模板织梦网站中使用这个功能：

一、找到并打开/plus/list.php文件，在里面找到如下代码（大概在第12行):

require_once(dirname(__FILE__).'/./include/common。Inc . PHP ')；

在其下面添加如下代码：

//列表页瀑布流无限加载代码

if(isset($ _ GET[' Ajax ']){

$typeid=isset($_GET['typeid'])？int val($ _ GET[' typeid ']): 0；//传递过来的分类身份

$page=isset($_GET['page'])？int val($ _ GET[' page ']): 0；//页码

$ page size=isset($ _ GET[' page size '])？int val($ _ GET[' page size ']): 15；//每页多少条，也就是一次加载多少条数据

$start=$page0？($ page-1)* $ page size : 0；//数据获取的起始位置。即限制条件的个参数。

$ typesql=$ typeid？其中type id=$ type id " ://这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需

$ 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)/$ page size)；//要加载的次数，因为默认已经加载了

$ 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 $ typeql ORder BY id desc LIMIT $ start，$ page size '；

$ dsql-Setquery($ SQL)；

$ dsql-执行('列表');

$ 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[' send date '],$ row[' title '],$ row[' is make ']，

$ row[' arcrank '],$ row[' name rule '],$ row[' typedir '],$ row[' money ']，

$row['filename']，$row['moresite']，$row['siteurl']，$ row[' site path '])；

$ row[' type URL ']=GetTypeURL($ row[' type id ']，$row['typedir']，

$ row['是默认值'],$ row['默认名称'],$ row['是部分']，

$ row[' name rule 2 ']，$ row[' more site ']，$ row[' site URL ']，$ row[' site path '])；

if($ row[' lit pic ']=='-' | | $ row[' lit pic ']==' '){

$ row[' lit pic ']=$ GLOBALS[' CFG _ CMS path ']./images/默认pic。gif '；

}

if(！preg_match('#^http:\/\/#i',$行[' litpic '])$ globals[' CFG _ multi _ site ']==' y '){

$ row[' lit pic ']=$ GLOBALS[' CFG _ main site '].$ row[' lit pic ']；

}

$ row[' pic name ']=$ row[' lit pic ']；//缩略图

//$ row[' stime ']=GetDateMk($ row[' pub date '])；

$ row[' stime ']=date(' Y-m-d h : I '，$ row[' public date '])；

$ row[' click ']=$ row[' click ']；

$row['typelink']=' ' .$row['typename'].'';//分类链

$ row[' full title ']=$ row[' title ']；//完整的标题

$ row[' short title ']=$ row[' short title ']；//副标题

$ row[' title ']=cn _ substr($ row[' title ']，80)；//截取后的标题

$ data[$ index]=$ row；

$ index

}

if(！空($data)){

$ statu=1；//有数据

}

$result=array('statu'=$statu，' list'=$data，' total'=$total，' load _ num '=$ load _ num)；

echo JSON _ encode($ result)；//返回数据

exit()；

}

二、则在需要无限加载的模板引用框架文件，如果网站模版中没有引用框架文件，则引用下面这个射流研究…代码，也可以把射流研究…下载下来放你的网站加载，这里使用百度的外链，节省资源：

脚本src=' http://libs。百度。com/jquery/1。9 .0/jquery。js '/脚本

三、在模板底部添加如下代码：

脚本类型='text/javascript '

var loadConfig={

URL _ AP : '/plus/list。PHP '，

typeid : { dede :字段名=' typeid '/}，

第：2页，

pagesize:15，//这个就是滑动一次添加几条信息的参数设置

加载： 0,

}

函数loadmoreplite(){

if(loadConfig.loading==0){

var type id=LoadConfig。类型id；

var page=loadConfig.page

var page size=LoadConfig。页面大小；

var url=loadConfig.url_api，data={ajax:'pullload '，typeid:typeid，page:page，page size : page size }；

var StOp=文档。尸体。滚动ToP | |文档。文档元素。scroll ToP，Dheart=$(文档).高度()，cHeight=文档。文档元素。客户身高；

控制台。原木(高度)；

if(StOp Cheight=DeHeight-Cheight){

加载配置。loading=1；

函数ajax(url，数据){

$.ajax({url: url，data: data，async: false，type: 'GET '，dataType: 'json '，success: function(data) {

添加内容(数据);

}});

}

ajax(url，数据);

}

}

}

函数添加内容(rs){

if(rs.statu==1){

var数据=rs.list

var total=rs.total

var arr=[]；

可变长度=数据。长度

for(var I=0；ileng tti){

arr.push('a href=')数据[i].arcurl '' title=' '数据[i].标题' ');

由…改编push(' dl class=' yz _ card ' ')；

由…改编push(' dt class=' yz _ card _ dt ' ')；

arr.push('img src=')数据[i].pic name ' ' ' ')；

由…改编push('/dt ')；

由…改编推送(' DD class=' yz _ card _ DD ' ')；

由…改编推送(' p class=' yz _ card _ p ' '数据[I]).title '/p ')；

由…改编push(' div class=' yz _ card _ icon ' ')；

由…改编push(' span class=' yz _ comment ' ')；

arr.push(数据[i]).点击);

由…改编push(' em class=' yz _ icon _ comment '/em ')；

由…改编push('/span ')；

由…改编push('/div ')；

由…改编push(' div class=' yz _ datetime ')数据[i].stime '/div ')；

由…改编推送('/DD ')；

由…改编push('/dl ')；

由…改编push('/a ')；

}

$('.列表框').追加(arr。join(')；

加载配置。load _ num=RS。load _ num

if(TotalLoadConfig。页面* LoadConfig。页面大小| | LoadConfig。页面LoadConfig。load _ num){

窗户。removeeventlistener(' Sr coll '，LoadMoreAPPLication，false)；

}

loadConfig.page

加载配置。loading=0；

}

}

函数pullLoad(){

窗户。addevent listener(' scroll '，loadMoreApply，false)；

}

pullLoad()

检查mobile()；

/script

1、上面的代码中的$('.列表框').追加(arr。join(')；里的列表框对应模板内列表的外框班级属性。

2、arr.push部分对应的是列表中单篇文章的代码。

3、这样就可以想要使用瀑布流无线加载了。

4、如果在其它页调用的话只需把代码中的typeid : { dede :字段名=' typeid '/}修改为typeid:5(5就是我们要调用文章的栏目ID)即可。

注意：很多人在调试这个功能的时候可能把标签写成了{ dede :列表页面大小=' 10 ' } {/dede :列表}要用{ dede : arclist row=' 15 ' } {/dede : arclist }才可以，不然文章是加载不出来的！

四、有些网友的需求添加了"加载完成"的提示！找到如下代码：

if(TotalLoadConfig。页面* LoadConfig。页面大小| | LoadConfig。页面LoadConfig。load _ num){

窗户。removeeventlistener(' Sr coll '，LoadMoreAPPLication，false)；

}

在判断语句的最后加上如下代码：

$(' div style=' width :；float : left text-align : center；padd : 10px 0pxcolor : # fffbackground : # 00aa 98 font-size : 16px；'加载完成/div ').插入后(' .listbox ')；

加上这段代码的意思是：当文章全部加载完的时候在所有文章更底部显示"加载完成"的提示！在类为".列表框"的标签下面插入"加载完成"的差异标签（注意一定要对应替换自己的类名称)!如图：

织梦模板利用埃阿斯实现瀑布流下拉无限加载（不带点击加载按钮)

上述文件下载：链接： https://pan.baidu.com/s/1OApbzKoqFkiIViExKavzsQ提取码： 9a2e复制这段内容后打开百度网盘手机App，操作更方便哦

另外在频道页，也就是带多个下级子栏目的频道页，这个代码还有点问题，需要修改plus.php。频道页做不到无限加载，是因为在文章表里面只有子栏目运算符而没且关联的父栏目运算符所以在查询文章dede_archives表的时候，父栏目运算符是没有对应的文章。所以为了解决这个问题我在原来的基础上加了个判断，如果当传过来的运算符下有子栏目的时候调用该栏目下的所以子栏目文章。

下面余斗就把修改后的完整代码贴出来：

if(isset($ _ GET[' Ajax ']){

$typeid=isset($_GET['typeid'])？int val($ _ GET[' typeid ']): 0；//传递过来的分类身份

$page=isset($_GET['page'])？int val($ _ GET[' page ']): 0；//页码

$ page size=isset($ _ GET[' page size '])？int val($ _ GET[' page size ']): 15；//每页多少条，也就是一次加载多少条数据

$start=$page0？($ page-1)* $ page size : 0；//数据获取的起始位置。即限制条件的个参数。

//获取频道栏目下的子栏目身份

$ yz _ type id=$ dsql-GetOne(' SELECT COUNT(id)as num FROM ` dede _ arctype ` WHERE Reid=$ type id ')；

if($yz_typeid['num']！=0){

$ SQL=' SELECT * FROM ` dede _ arctype ` WHERE Reid=$ type id '；

$ dsql-Setquery($ SQL)；

$ dsql-Execute(' yz _ id ')；

$ typepdid=

$ yz=1；

while($ row=$ dsql-GetArray(' yz _ id '){

if($yz_typeid['num']==$yz){

$ typepdid .='(typeid=').$row['id'].')';

}else{

$ typepdid .='(typeid=').$row['id'].)或；

$ yz=1；

}

}

//echo $yz_typeid['num'].' '.$ typepdid

//exit()；

}else {

$ typepdid=' typeid=$ typeid

}

$ typesql=$ typeid？WHERE $键入pdid“:”；//这个是用于首页实现瀑布流加载，因为首页加载数据是无需分类的，所以要加以判断，如果无需

$ 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)/$ page size)；//要加载的次数，因为默认已经加载了

$ 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 $ typeql ORder BY id desc LIMIT $ start，$ page size '；

$ dsql-Setquery($ SQL)；

$ dsql-执行('列表');

$ statu=0；//是否有数据，默认没有数据

$ data=array()；

$ index=0；

while($ row=$ dsql-GetArray(' list ')){

$ row[' description ']=cn _ substr($ row[' description ']，90)；

$ row[' id ']=$ row[' id ']；

$ row[' filename ']=$ row[' arcurl ']=GetFileURL($ row[' id ']，

$ row[' typeid '],$ row[' send date '],$ row[' title '],$ row[' is make ']，

$ row[' arcrank '],$ row[' name rule '],$ row[' typedir '],$ row[' money ']，

$row['filename']，$row['moresite']，$row['siteurl']，$ row[' site path '])；

$ row[' type URL ']=GetTypeURL($ row[' type id ']，$row['typedir']，

$ row['是默认值'],$ row['默认名称'],$ row['是部分']，

$ row[' name rule 2 ']，$ row[' more site ']，$ row[' site URL ']，$ row[' site path '])；

$row['waparcurl']=preg_replace((.*/m/)'、/'、$ row[' arcurl '])；

if($ row[' lit pic ']=='-' | | $ row[' lit pic ']==' '){

$ row[' lit pic ']=$ GLOBALS[' CFG _ CMS path ']./images/默认pic。gif '；

}

if(！preg_match('#^http:\/\/#i',$行[' litpic '])$ globals[' CFG _ multi _ site ']==' y '){

$ row[' lit pic ']=$ GLOBALS[' CFG _ main site '].$ row[' lit pic ']；

}

$ row[' pic name ']=$ row[' lit pic ']；//缩略图

//$ row[' stime ']=GetDateMk($ row[' pub date '])；

$ row[' stime ']=date(' Y-m-d h : I '，$ row[' public date '])；

$ row[' click ']=$ row[' click ']；

$row['typelink']=' ' .$row['typename'].'';//分类链

$ row[' full title ']=$ row[' title ']；//完整的标题

$ row[' short title ']=$ row[' short title ']；//副标题

$ row[' title ']=cn _ substr($ row[' title ']，80)；//截取后的标题

$ data[$ index]=$ row；

$ index

}

if(！空($data)){

$ statu=1；//有数据

}

$result=array('statu'=$statu，' list'=$data，' total'=$total，' load _ num '=$ load _ num)；

echo JSON _ encode($ result)；//返回数据

exit()；

}