jquery scroll down instantly load content implemented waterfall stream effect _php instance

Loads new content dynamically as the drop-down scroll bar or mouse wheel scrolls to the bottom of the page.

The background uses JSON to transfer data, and the example program only writes sample arrays. The data is also set to only two attributes, which need to be rewritten according to the actual application.

The page uses UL Li as a container, each LI represents a column

 
  
  
  
  
   
   
  
  
   
   
  
  
   
   
PHP and jquery and Ajax implement drop-down waterfall streaming effects (no plugins required)  
  
   
   
 
 
  
  

JS Code

/* @ Version Date: Version Date: April 11, 2012 @ Copyright: 1024x768 Intelligence (http://www.1024i.com) obtaining permission to use the library, you must retain the copyright Declaration information. To report a bug, comment or suggestion, please contact Lou Barnes (iua1024@gmail.com) */$ (document). Ready (function () {Loadmore ();}); $ (window). Scroll (function () {///when scrolling to the bottom 100 pixels, the new content is loaded if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height ( ) <100) Loadmore (); }); function Loadmore () {$.ajax ({url: ' data.php ', DataType: ' JSON ', success:function (JSON) {if (typeof json     = = ' object ') {var oproduct, $row, iheight, itempheight;  For (var i=0, l=json.length; i 
  
    Itempheight) {iheight = Itempheight;       $row = $ (this);      }      });      $item = $ (' 
   
 ' +oproduct.title+ '). Hide ();      $row. Append ($item);     $item. FadeIn (); }    }   }  }); } 
 
  

Let's share a piece of code: PHP jquery and Ajax combine to achieve a drop-out waterfall stream effect

My style, nonsense not much to say, interested friends directly look at the following code:

Front desk:

$category = $this->getmyval (' category ', $_get);
$xiaohuaList =xiaohua::model ()->getxiaohao ($category); Open 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

Background:

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 method, 1 for inserting the shortest column, 2 for sequential Insert Getresource:function (index) {}///Get dynamic resource function, you must return a brick element collection, passing in the parameter is the number of times 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;$ (window) to be forced to rearrange existing elements. 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 () {//images 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 ( setting.insert_type==2) {Insert2 ($ (elements). EQ (i), i,setting.fadein&&fadein);//Insert element}image=null;} Image.onreadystatechange=function () {//handles caching issues with 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 (setting.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.$ Columns.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.$ Columns.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 Var min=waterfall. $columns. EQ (0). Outerheight (), min_key=0;waterfall.$ Columns.each (function (i) {if ($ (this). Outerheight ()
  
   =bottom-windowheight) {render (GetElements (), true);}},100);} The function onResize () {///window is scaled to rearrange if (Calculatecolumns () ==waterfall.column_num) return;//The number of columns has not changed, do not need to rearrange var $cells = Waterfall. $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);
  
 

The above code is divided into two parts to introduce PHP and jquery and Ajax to achieve the drop-out waterfall stream effect, the code is relatively simple, with comments, if there is a bug welcome, the script of the small will be in the first time and you contact. Thank you!

