PHP combines jquery and Ajax for waterfall streaming effects, jqueryajax_php tutorials

PHP combines jquery and Ajax for waterfall streaming effects, Jqueryajax

No nonsense, directly on the code,

Front desk:

<?php $category = $this->getmyval (' category ', $_get); $xiaohuaList =xiaohua::model ()->getxiaohao ($category) ; Opens the data displayed by default on the page?>  <?php foreach ($xiaohuaList as $xiaohua):?>    <?php $q _id= $xiaohua->id;? >          <?php echo chtml::encode ($xiaohua->title);? >      "><?php echo $xiaohua->content;?      >  share      <?php Endforeach;? >

Background:

Public Function Actionlistxiaohua () {  $xiaohuaList =xiaohua::model ()->getxiaohua ();//Get joke information  Echo Cjson:: Encode ($xiaohuaList);}

Js:

(function ($) {var//parameter setting={column_width:240,//column width column_classname: ' Waterfall_column ',//column class name Column_space:2, Column spacing cell_selector: '. Cell ',//selector of the bricks to be arranged, context for the entire external container img_selector: ' img ',//selector to load the picture auto_imgheight:true,// Whether you need to automatically calculate the height of the picture fadein:true,//whether fade load fadein_speed:600,//fade rate, unit milliseconds insert_type:1,//cell insertion mode, 1 for inserting the shortest column, 2 for sequential rotation insert Getreso Urce:function (index) {}//Get a dynamic resource function, you must return a collection of brick elements, the number of times the parameter is loaded},//waterfall=$.waterfall={},//External information Object $waterfall =null;/ /container waterfall.load_index=0,//Load Count $.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);     Forces the fade waterfall._scrolltimer2=null to rearrange existing elements;       $ (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 () {//Create column waterfall.column_num=calculatecolumns ();//column//Cycle create column Var html= '; for (Var i=0;i
 
  
0) {//itself is a picture or contains a picture var image=new image; var src=$ (this) [0].nodename.tolowercase () = = ' img '? $ (this). attr (' src '): $ (this). Find (Setting.img_selector). attr ('       Src ');         Image.onload=function () {///Picture can be automatically calculated after loading image.onreadystatechange=null; if (setting.insert_type==1) {Insert ($ (elements). EQ (i), setting.fadein&&fadein);//Insert Element}else if (set ting.insert_type==2) {Insert2 ($ (elements). EQ (i), i,setting.fadein&&fadein);//Insert element} image       =null;            } image.onreadystatechange=function () {//Handles caching problems for browsers such as IE: the onload event will no longer be triggered after the picture is cached if (image.readystate = = "complete") {           Image.onload=null; if (setting.insert_type==1) {Insert ($ (elements). EQ (i), setting.fadein&&fadein);//Insert Element}else if (           setting.insert_type==2) {Insert2 ($ (elements). EQ (i), i,setting.fadein&&fadein);//Insert Element}         Image=null;     }} image.src=src;  }else{//do not consider picture loading     if (setting.insert_type==1) {Insert ($ (elements). EQ (i), setting.fadein&&fadein);//Insert Element}else if (SE  tting.insert_type==2) {Insert2 ($ (elements). EQ (i), i,setting.fadein&&fadein);//Insert Element}});  } function Public_render (elems) {//ajax Gets the render interface of the element render (elems,true); } function Insert ($element, Fadein) {//Inserts the element into the shortest column if (Fadein) {///Fade $element. CSS (' opacity ', 0). AppendTo (Waterfall. $column   S.eq (Calculatelowest ())). FadeTo (setting.fadein_speed,1);   }else{//not Fade $element. AppendTo (Waterfall. $columns. EQ (calculatelowest ())); }} function Insert2 ($element, I,fadein) {//sequentially Insert element if (Fadein) {//Fade $element. CSS (' opacity ', 0). AppendTo (Waterfall. $c   Olumns.eq (I%waterfall.column_num)). FadeTo (setting.fadein_speed,1);   }else{//not Fade $element. AppendTo (Waterfall. $columns. EQ (i%waterfall.column_num));   }} function Calculatelowest () {//The index of the shortest column is 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 () {////window scaling when rearranging if (Calculatecolumns () ==waterfall.column_num) return;//number of columns unchanged, no need to rearrange Var $cells =water   Fall. $waterfall. Find (Setting.cell_selector);   Waterfall. $columns. Remove ();   Waterfall. $columns =creatcolumn (); Render ($cells, false);
Force not Fade} when an existing element is re-queued) (jQuery);  
   
  
 

All right, it's all done.

Let's share one for you.

 
  
 <title>Fixed width Jquery+ajax+json waterfall flow layout (each line of code has a detailed comment)</title>
Preview No effect please refresh

 
 

  
  
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
 
Picture Title
 
   
IMG src= "/uploads/allimg/120813/1-120q3145u0938.jpg" >
Picture Title
 
   
 
Picture Title
 
  
 
 
Loading ...
If the run effect is displayed, click "Refresh Page"
"Back to Home" "Refresh this page" "Back to Top" "Close this page"
              

Articles you may be interested in:

• JQuery Waterfall Flow Floating Layout (i) (Delay Ajax loading pictures)
• JQuery Waterfall Flow Absolute Positioning layout (ii) (Delay Ajax loading pictures)
• PHP and jquery and Ajax implement drop-down waterfall streaming effects (no plugins required)

http://www.bkjia.com/PHPjc/1089588.html www.bkjia.com true http://www.bkjia.com/PHPjc/1089588.html techarticle PHP with jquery and Ajax to achieve waterfall streaming effects, jqueryajax no nonsense, directly on the code, front desk: php $category = $this-getmyval (' category ', $_get); $xiaohuaList = Xiaohua::model ()-getxi ...

