PHP和Jquery和ajax实现下拉淡出瀑布流效果（无需插件）
不废话，直接上代码，您也可以点这里看瀑布流演示http://www.shouce.ren/post/xiaohua。
前台：<?php <br />
$category=$this->getMyVal('category',$_GET);<br>
$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打开页面默认显示的数据<br>
?><br>
<br>
<div>
<br>
<?php foreach ($xiaohuaList as $xiaohua):?><br>
<?php $q_id=$xiaohua->id;?><br>
<div>
<br>
<div>
<span></span><strong>"><?php echo CHtml::encode($xiaohua->title);?></strong>
</div>
<br>
<div>"><?php echo $xiaohua->content;?></div>
<br>
<div><span>);" class="fx cursor_p" data-id="<?php echo $q_id;?>"><span></span>分享</span></div>
<br>
</div>
<br>
<?php endforeach;?><br>
</div>
<br>
<script><br />
var opt={<br />
getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)<br />
var html='';<br />
var _url='<?php echo $this->createUrl('listXiaohua');?>';<br />
$.ajax({<br />
type: "get",<br />
url: _url,<br />
dataType : "json",<br />
async:false,<br />
success: function(data){<br />
for( var i in data){<br />
var q_id=data[i].id;<br />
html+='<div class="cell m-bg item-h border_h"><div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"><strong class="color-5 fx_t_'+q_id+'">'+data[i].title+'<div class="padding-t-5 fx_c_'+q_id+'">'+data[i].content+''<br />
+'<div class="padding-t-5 text-right"><span onclick="fx('+q_id+');" class="fx cursor_p" data-id="'+q_id+'"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true">分享';<br />
}<br />
}});<br />
return $(html);<br />
},<br />
column_width:376,<br />
column_space:10,<br />
auto_imgHeight:true,<br />
insert_type:1<br />
}<br />
$('#waterfall').waterfall(opt);<br />
</script>后台：public function actionListXiaohua() {<br>
$xiaohuaList=Xiaohua::model()->getXiaohua();//获取笑话信息<br>
echo CJSON::encode($xiaohuaList);<br>
}js：;(function($){<br>
var<br>
//参数<br>
setting={<br>
column_width:240,//列宽<br>
column_className:'waterfall_column',//列的类名<br>
column_space:2,//列间距<br>
cell_selector:'.cell',//要排列的砖块的选择器，context为整个外部容器<br>
img_selector:'img',//要加载的图片的选择器<br>
auto_imgHeight:true,//是否需要自动计算图片的高度<br>
fadein:true,//是否渐显载入<br>
fadein_speed:600,//渐显速率，单位毫秒<br>
insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入<br>
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数<br>
},<br>
//<br>
waterfall=$.waterfall={},//对外信息对象<br>
$waterfall=null;//容器<br>
waterfall.load_index=0, //加载次数<br>
$.fn.extend({<br>
waterfall:function(opt){<br>
opt=opt||{};<br>
setting=$.extend(setting,opt);<br>
$waterfall=waterfall.$waterfall=$(this);<br>
waterfall.$columns=creatColumn();<br>
render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显<br>
waterfall._scrollTimer2=null;<br>
$(window).bind('scroll',function(){<br>
clearTimeout(waterfall._scrollTimer2);<br>
waterfall._scrollTimer2=setTimeout(onScroll,300);<br>
});<br>
waterfall._scrollTimer3=null;<br>
$(window).bind('resize',function(){<br>
clearTimeout(waterfall._scrollTimer3);<br>
waterfall._scrollTimer3=setTimeout(onResize,300);<br>
});<br>
}<br>
});<br>
function creatColumn(){//创建列<br>
waterfall.column_num=calculateColumns();//列数<br>
//循环创建列<br>
var html='';<br>
for(var i=0;i<waterfall.column_num></waterfall.column_num>
html+='<div></div>';<br>
}<br>
$waterfall.prepend(html);//插入列<br>
return $('.'+setting.column_className,$waterfall);//列集合<br>
}<br>
function calculateColumns(){//计算需要的列数<br>
var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space));<br>
if(num
return num;<br>
}<br>
function render(elements,fadein){//渲染元素<br>
if(!$(elements).length) return;//没有元素<br>
var $columns = waterfall.$columns;<br>
$(elements).each(function(i){<br>
if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度，或者是按顺序插入，则不必等图片加载完就能计算列的高度了<br>
if(setting.insert_type==1){<br>
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素<br>
}else if(setting.insert_type==2){<br>
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素<br>
}<br>
return true;//continue<br>
}<br>
if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>0){//本身是图片或含有图片<br>
var image=new Image;<br>
var src=$(this)[0].nodeName.toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src');<br>
image.onload=function(){//图片加载后才能自动计算出尺寸<br>
image.onreadystatechange=null;<br>
if(setting.insert_type==1){<br>
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素<br>
}else if(setting.insert_type==2){<br>
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素<br>
}<br>
image=null;<br>
}<br>
image.onreadystatechange=function(){//处理IE等浏览器的缓存问题：图片缓存后不会再触发onload事件<br>
if(image.readyState == "complete"){<br>
image.onload=null;<br>
if(setting.insert_type==1){<br>
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素<br>
}else if(setting.insert_type==2){<br>
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素<br>
}<br>
image=null;<br>
}<br>
}<br>
image.src=src;<br>
}else{//不用考虑图片加载<br>
if(setting.insert_type==1){<br>
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素<br>
}else if(setting.insert_type==2){<br>
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素<br>
}<br>
}<br>
});<br>
}<br>
function public_render(elems){//ajax得到元素的渲染接口<br>
render(elems,true);<br>
}<br>
function insert($element,fadein){//把元素插入最短列<br>
if(fadein){//渐显<br>
$element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);<br>
}else{//不渐显<br>
$element.appendTo(waterfall.$columns.eq(calculateLowest()));<br>
}<br>
}<br>
function insert2($element,i,fadein){//按序轮流插入元素<br>
if(fadein){//渐显<br>
$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);<br>
}else{//不渐显<br>
$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));<br>
}<br>
}<br>
function calculateLowest(){//计算最短的那列的索引<br>
var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;<br>
waterfall.$columns.each(function(i){<br>
if($(this).outerHeight()<min></min>
min=$(this).outerHeight();<br>
min_key=i;<br>
}<br>
});<br>
return min_key;<br>
}<br>
function getElements(){//获取资源<br>
$.waterfall.load_index++;<br>
return setting.getResource($.waterfall.load_index,public_render);<br>
}<br>
waterfall._scrollTimer=null;//延迟滚动加载计时器<br>
function onScroll(){//滚动加载<br>
clearTimeout(waterfall._scrollTimer);<br>
waterfall._scrollTimer=setTimeout(function(){<br>
var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列<br>
var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离<br>
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离<br>
var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度<br>
if(scrollTop>=bottom-windowHeight){<br>
render(getElements(),true);<br>
}<br>
},100);<br>
}<br>
function onResize(){//窗口缩放时重新排列<br>
if(calculateColumns()==waterfall.column_num) return; //列数未改变，不需要重排<br>
var $cells=waterfall.$waterfall.find(setting.cell_selector);<br>
waterfall.$columns.remove();<br>
waterfall.$columns=creatColumn();<br>
render($cells,false); //重排已有元素时强制不渐显<br>
}<br>
})(jQuery);好了，全部完成了。这里看瀑布流演示http://www.shouce.ren/post/xiaohua。
AD：真正免费，域名+虚机+企业邮箱=0元
Wissen Sie, ob Sie die andere Person sofort kündigen, nachdem Sie ihr auf Douyin gefolgt sind?
So beheben Sie einen Fehler im Skript der aktuellen Seite
Einführung in die Verwendung von Rowid in Oracle
So löschen Sie WeChat-Emoticons
Ripple-Kaufprozess
Öffnen Sie den Home-Ordner auf dem Mac
Verwendung der Sortierfunktion c++sort
Was ist das Funktionsprinzip und der Prozess von Mybatis?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
