PHP結合Jquery和ajax實現瀑布流特效_php執行個體

不廢話，直接上代碼，

前台：

<?php $category=$this->getMyVal('category',$_GET);$xiaohuaList=Xiaohua::model()->getXiaohao($category); //開啟頁面預設顯示的資料?>  <?php foreach ($xiaohuaList as $xiaohua):?>    <?php $q_id=$xiaohua->id;?>          <?php echo CHtml::encode($xiaohua->title);?>      "><?php echo $xiaohua->content;?>      分享      <?php endforeach;?>

後台：

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);

好了，全部完成了。

再給大家分享一個吧

定寬Jquery+AJAX+JSON瀑布流布局（每行代碼都有詳細注釋）
預覽無效果請重新整理
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
 
圖片標題
 
 
  
img src="/uploads/allimg/120813/1-120Q3145U0938.jpg"> 
圖片標題
 
 
  
 
圖片標題
 
 
正在載入……
如果運行效果無非顯示請點擊【重新整理頁面】
【返回首頁】【重新整理本頁】【返回頂部】【關閉本頁】
              

