本篇內容介紹了“怎么用PHP+Jquery+ajax實現(xiàn)下拉淡出瀑布流效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
導讀：
瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格，像花瓣網、蘑菇街、美麗說等。
不廢話，直接上代碼，整段代碼分為前后兩段代碼，具體代碼如下所示。
前臺：
重慶分公司
重慶分公司
$category=$this->getMyVal('category',$_GET);
$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打開頁面默認顯示的數據
?>
id;?>
">title);?> 后臺：
public function actionListXiaohua() {
$xiaohuaList=Xiaohua::model()->getXiaohua();//獲取笑話信息
echo CJSON::encode($xiaohuaList);
}js：
;(function($){
var
//參數
setting={
column_width:240,//列寬
column_className:'waterfall_column',//列的類名
column_space:2,//列間距
cell_selector:'.cell',//要排列的磚塊的選擇器，context為整個外部容器
img_selector:'img',//要加載的圖片的選擇器
auto_imgHeight:true,//是否需要自動計算圖片的高度
fadein:true,//是否漸顯載入
fadein_speed:600,//漸顯速率，單位毫秒
insert_type:1, //單元格插入方式，1為插入短那列，2為按序輪流插入
getResource:function(index){ } //獲取動態(tài)資源函數,必須返回一個磚塊元素集合,傳入參數為加載的次數
},
//
waterfall=$.waterfall={},//對外信息對象
$waterfall=null;//容器
waterfall.load_index=0, //加載次數
$.fn.extend({
waterfall:function(opt){
opt=opt||{};
setting=$.extend(setting,opt);
$waterfall=waterfall.$waterfall=$(this);
waterfall.$columns=creatColumn();
render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素時強制不漸顯
waterfall._scrollTimer2=null;
$(window).bind('scroll',function(){
clearTimeout(waterfall._scrollTimer2);
waterfall._scrollTimer2=setTimeout(onScroll,300);
});
waterfall._scrollTimer3=null;
$(window).bind('resize',function(){
clearTimeout(waterfall._scrollTimer3);
waterfall._scrollTimer3=setTimeout(onResize,300);
});
}
});
function creatColumn(){//創(chuàng)建列
waterfall.column_num=calculateColumns();//列數
//循環(huán)創(chuàng)建列
var html='';
for(var i=0;i';
}
$waterfall.prepend(html);//插入列
return $('.'+setting.column_className,$waterfall);//列集合
}
function calculateColumns(){//計算需要的列數
var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space));
if(num<1){ num=1; } //保證至少有一列
return num;
}
function render(elements,fadein){//渲染元素
if(!$(elements).length) return;//沒有元素
var $columns = waterfall.$columns;
$(elements).each(function(i){
if(!setting.auto_imgHeight||setting.insert_type==2){//如果給出了圖片高度，或者是按順序插入，則不必等圖片加載完就能計算列的高度了
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
return true;//continue
}
if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>0){//本身是圖片或含有圖片
var image=new Image;
var src=$(this)[0].nodeName.toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src');
image.onload=function(){//圖片加載后才能自動計算出尺寸
image.onreadystatechange=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
image.onreadystatechange=function(){//處理IE等瀏覽器的緩存問題：圖片緩存后不會再觸發(fā)onload事件
if(image.readyState == "complete"){
image.onload=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
}
image.src=src;
}else{//不用考慮圖片加載
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
}
});
}
function public_render(elems){//ajax得到元素的渲染接口
render(elems,true);
}
function insert($element,fadein){//把元素插入短列
if(fadein){//漸顯
$element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
}else{//不漸顯
$element.appendTo(waterfall.$columns.eq(calculateLowest()));
}
}
function insert2($element,i,fadein){//按序輪流插入元素
if(fadein){//漸顯
$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);
}else{//不漸顯
$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));
}
}
function calculateLowest(){//計算短的那列的索引
var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;
waterfall.$columns.each(function(i){
if($(this).outerHeight()=bottom-windowHeight){
render(getElements(),true);
}
},100);
}
function onResize(){//窗口縮放時重新排列
if(calculateColumns()==waterfall.column_num) return; //列數未改變，不需要重排
var $cells=waterfall.$waterfall.find(setting.cell_selector);
waterfall.$columns.remove();
waterfall.$columns=creatColumn();
render($cells,false); //重排已有元素時強制不漸顯
}
})(jQuery); “怎么用PHP+Jquery+ajax實現(xiàn)下拉淡出瀑布流效果”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網站，小編將為大家輸出更多高質量的實用文章！
