jquery scroll down instantly load content implemented waterfall stream effect, jquery scroll down _php tutorial

jquery scroll down instantly load content implemented waterfall stream effect, jquery scroll down

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 @ All rights reserved: Intelligence (http://www.1024i.com) to obtain permission to use the library, you must retain the copyright notice 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 implementation of the drop-out waterfall stream effect, the code is relatively simple, with comments, if there is a bug welcome to put forward, help guests of the small will be in the first time and everyone contact. Thank you!

Articles you may be interested in:

• Simple and easy-to-use based on the jquery version of Sina Weibo scroll down effect (with demo)
• JQuery Waterfall Flow Floating Layout (i) (Delay Ajax loading pictures)
• JQuery Waterfall Flow Absolute Positioning layout (ii) (Delay Ajax loading pictures)
• jquery Product intermittent downward scrolling effect core code
• PHP combines jquery and Ajax for waterfall streaming effects

http://www.bkjia.com/PHPjc/1089586.html www.bkjia.com true http://www.bkjia.com/PHPjc/1089586.html techarticle jquery scrolls down the waterfall stream effect of instant load content implementation, jquery scrolls down the scroll bar or the mouse wheel scrolls to the bottom of the page, dynamically loading new content on the fly. Backstage with ...

