Php+jquery and Ajax combined to achieve down-pull fade out waterfall flow effect "No plug-ins" _php instance

Guide:

Waterfall flow, also known as Waterfall flow layout. is a more popular Web page layout, visual representation of the uneven layout of multiple columns, as the page scroll down, this layout will continue to load the data block and attached to the current tail. The first site to use this layout is Pinterest, gradually in the domestic popular. Most of the domestic fresh station for this type of style, such as petals nets, mushroom street, Beautiful said.

No nonsense, directly on the code, the entire code is divided into two pieces of code, the specific code as shown below.

Front desk:

<?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=N> 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 Glyphicon Glyphicon-share-altIn-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 is a small set to introduce the Php+jquery and Ajax to achieve the pull out of the waterfall flow effect "without plug-ins" related to the introduction, I hope to help you, if you have any questions in the use of the process, please give me a message, small series will promptly reply to everyone. At the same time, thank you very much for your support of cloud-dwelling community website!