PHP和Jquery和ajax實現下拉淡出瀑布流效果（無需外掛程式），jqueryajax_PHP教程

PHP和Jquery和ajax實現下拉淡出瀑布流效果（無需外掛程式），jqueryajax

不廢話，直接上代碼，您也可以點這裡看瀑布流效果示範。

前台：

$category=$this->getMyVal('category',$_GET);
$xiaohuaList=Xiaohua::model()->getXiaohao($category); //開啟頁面預設顯示的資料
?>

id;?>title);?>">content;?>分享

後台：

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){ }  //擷取動態資源函數,必須返回一個磚塊元素集合,傳入參數為載入的次數   },   //   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(){//建立列      waterfall.column_num=calculateColumns();//列數  //迴圈建立列  var html='';  for(var i=0;i0){//本身是圖片或含有圖片      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等瀏覽器的緩衝問題：圖片緩衝後不會再觸發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);

好了，全部完成了。這裡看瀑布流效果示範。

http://www.bkjia.com/PHPjc/1088600.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1088600.htmlTechArticlePHP和Jquery和ajax實現下拉淡出瀑布流效果（無需外掛程式），jqueryajax 不廢話，直接上代碼，您也可以點這裡看瀑布流效果示範。 前台： ?php $c...

