jquery down-scrolling instant load content realization of waterfall flow effect _php instance

Dynamically loads new content immediately when the Drop-down scroll bar or mouse wheel scrolls to the bottom of the page.

The background uses JSON to transfer the data, and only the sample array is written in the sample program. The data is only set to two attributes, which need to be overwritten according to the actual application.

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

<ul id= "Stage" > 
 <li></li> 
 <li></li> 
 <li></li> PHP and jquery and Ajax implementations pull out waterfall streaming effects (no plugins required) 
 <li></li> 

JS Code

* @ Version Date: Version Date: April 11, 2012 @ Copyright: 1024 Intelligence (http://www.1024i.com) to obtain permission to use this class library, you must retain the copyright declaration information. 
To report vulnerabilities, comments or suggestions, please contact Lou Barnes (iua1024@gmail.com)/$ (document). Ready (function () {loadmore (); 
}); $ (window). Scroll (function () {///when scrolling to the bottom 100 pixels above, load the new content if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height 
() <100) Loadmore (); 
}); function Loadmore () {$.ajax ({url: ' data.php ', DataType: ' JSON ', success:function (JSON) {if (Typeo 
    F json = = (' object ') {var oproduct, $row, iheight, itempheight; 
     For (var i=0, l=json.length; i<l; i++) {oproduct = Json[i]; 
     Find the column with the lowest current height, and add the new content to the column iheight =-1; 
      $ (' #stage Li '). each (function () {itempheight = number ($ (this). Height ()); 
       if (Iheight==-1 | | iheight>itempheight) {iheight = Itempheight; 
      $row = $ (this); 
     } 
     }); $item = $ (' <div><br/> ' +oproduCt.title+ ' </div> '). Hide (); 
     $row. Append ($item); 
    $item. FadeIn (); 
} 
   } 
  } 
 });  }

Next to share a piece of code: PHP jquery and Ajax combined to achieve down-pull fading waterfall flow effect

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

Front desk:

<br><?php <br> $category = $this->getmyval (' category ', $_get);<br> $xiaohuaList =xiaohua:: Model ()->getxiaohao ($category); Open the data that the page defaults to display <br>?><br><br><div id= "Waterfall" > <?php foreach ($xiaohuaList as $ Xiaohua):?> <?php $q _id= $xiaohua->id;? > <div class= "cell m-bg item-h border_h" > <div class= "border-solid-b padding-b-5 text-center" ><span class= "G-BG glyphicon glyphicon-sunglasses margin-r-5" aria-hidden= true "></span><strong class=" color-5 fx_t_<?php echo $q _id;? > "><?php echo chtml::encode ($xiaohua->title);? ></strong></div> <div class= "padding-t-5 fx_c_<?php echo $q _id;? > "><?php echo $xiaohua->content;? ></div> <div class= "padding-t-5 text-right" ><span onclick= "FX (<?php echo $q _id;? >), "class=" FX cursor_p "data-id=" <?php echo $q _id;? > "><span class=" G-BG glyphicon glyphicon-share-alt margin-r-5 "true" aria-hidden=T;</span> share </span></div> </div> <?php Endforeach;? > </div> <script> var opt={getresource:function (index,render) {//index to load times, render to render interface functions, Accepts a DOM collection or jquery object as an argument.
Data obtained through asynchronous methods such as Ajax can be passed into the interface for rendering, such as render (Elem) var html= '; var _url= ' <?php echo $this->createurl (' Listxiaohua ');?
> '; $.ajax ({type: ' Get ', url: _url, DataType: "JSON", Async:false, Success:function (data) {for (var i in data) {var Q_id=da
Ta[i].id; html+= ' <div class= "cell m-bg item-h border_h" ><div class= "Border-solid-b padding-b-5 text-center" >< Span class= "G-BG glyphicon glyphicon-sunglasses margin-r-5" aria-hidden= true "></span><strong class=" Color-5 fx_t_ ' +q_id+ ' "> ' +data[i].title+ ' </strong></div><div class=" padding-t-5 fx_c_ ' +q_id+ ' " > ' +data[i].content+ ' </div> ' + ' <div class= ' padding-t-5 text-right ' ><span onclick= ' fx (' +q_id+ '); " class= "FX cursor_p" data-id= "' +q_id+ ' ><span class=" G-BG GlyphiconE-alt margin-r-5 "aria-hidden=" true "></span> share </span></div></div>";
}
}});
return $ (HTML);
}, column_width:376, Column_space:10, Auto_imgheight:true, insert_type:1} $ (' #waterfall '). Waterfall (opt);  </script>

Background:

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

Js:

;(function ($) {var//parameter setting={column_width:240,//column width column_classname: ' Waterfall_column ',//Column's class name column_space:2,// Column spacing cell_selector: '. Cell ',//The selector of the bricks to arrange, the context for the entire outer container img_selector: ' img ',//The selector of the picture to be loaded auto_imgheight:true,//
Whether it is necessary to automatically calculate the height of the picture fadein:true,//whether fade load fadein_speed:600,//fade rate, unit millisecond insert_type:1,//cell insertion mode, 1 for Insert shortest column, 2 for sequential insertion Getresource:function (index) {}//Get dynamic resource function, you must return a collection of bricks 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);
Forcibly fade waterfall._scrolltimer2=null When the existing element is rearrangement; $ (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 ()///columns//Loops Create column Var html= '; for (Var i=0;i< waterfall.column_num;i++) {html+= ' <div class= "' +setting.column_classname+ '" style= "width: ' +setting.column_ width+ ' px; Display:inline-block; *display:inline;zoom:1; Margin-left: ' +setting.column_space/2+ ' px;margin-right: ' +setting.column_space/2+ ' px; Vertical-align:top;
Overflow:hidden "></div>"; $waterfall. prepend (HTML);//Insert Column return $ ('. ') +setting.column_classname, $waterfall);//Column collection} function Calculatecolumns () {//Calculate required number of columns Var Num=math.floor ($
Waterfall.innerwidth ())/(Setting.column_width+setting.column_space));
if (num<1) {num=1;}//guarantee at least one column return num; function Render (Elements,fadein) {//Render element if (!$ (elements). length) return;//no element var $columns = waterfall. $columns; $ ( elements). Each (function (i) {if (!setting.auto_imgheight| | setting.insert_type==2) {//If the picture height is given, or is inserted sequentially, the height of the column can be computed without waiting for the picture to be loaded 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} return True;//continue} if ($ (this) [0].nodename.tolowercase () = = ' IMG ' | | $ (this). Find (Setting.img_selector). length>0) {//itself is a picture or contains a picture of Var image=new image; var src=$ (this) [0].
Nodename.tolowercase () = = ' img '? $ (this). attr (' src '): $ (a). Find (Setting.img_selector). attr (' src '); Image.onload=function () {//Picture is loaded to automatically calculate the dimension 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 () {//handling caching problems for browsers such as IE: the onload event will not be triggered after the image cache (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 the picture load 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}}); The function Public_render (elems) {//ajax Gets the rendering interface render (elems,true) of the element,} 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) {//sequential insertion of 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 shortest computed index of the column Var min=waterfall. $columns. EQ (0). Outerheight (), min_key=0; waterfall.$ Columns.each (function (i) {if ($ (this). Outerheight () <min) {min=$ (this). Outerheight (); min_key=i;}});
return min_key; function getelements () {//Get resource $.waterfall.load_index++ return Setting.getresource ($.waterfall.load_index,public_
Render);
waterfall._scrolltimer=null;//delay Scrolling Load timer function onscroll () {//Scrolling load cleartimeout (Waterfall._scrolltimer);
Waterfall._scrolltimer=settimeout (function () {var $lowest _column=waterfall. $columns. EQ (calculatelowest ());//Shortest column var bottom= $lowest _column.offset (). top+ $lowest _column.outerheight ()/The shortest column bottom distance from the top of the browser window var scrolltop= document.documentelement.scrolltop| | document.body.scrolltop| | 0;//scroll bar distance var windowheight=document.documentelement.clientheight| | document.body.clientheight| |
0;//window height if (scrolltop>=bottom-windowheight) {render (GetElements (), true);}},100); The function onResize () {//window zooms in to rearrange if (Calculatecolumns () ==waterfall.column_num) return;//column number unchanged, no need to rearrange var $cells =
Waterfall. $waterfall. Find (Setting.cell_selector);
Waterfall. $columns. Remove ();
Waterfall. $columns =creatcolumn (); renDer ($cells, false);  Force not Fade}} when rearrangement of existing elements (jQuery);

The above code is divided into two parts for you to introduce PHP and jquery and Ajax implementation of the drop down waterfall flow effect, the code is relatively simple, with comments, such as a bug welcome to put forward, cloud Habitat Community Small series will be in the first time and you contact. Thank you!