Analysis of waterfall Flow layout
Discussion on the problems and solutions in the realization of the Waterfall streaming web page by individuals
Toss: Waterfall flow layout (based on multi-column list fluid layout implementation)
A brief analysis and suggestion on JavaScript waterfall flow and waterfall flow
Because of their use of jquery more, they sprouted the waterfall flow into the idea of plug-ins, pictures on the use of Thunder ued on the beauty of the map bar.
Look at the demo first.
Let's put the code out.
Copy Code code as follows:
;(function ($) {
Var
Parameters
setting={
column_width:204,//Column Width
Column_classname: ' Waterfall_column ',//Column's class name
column_space:10,//column Spacing
Cell_selector: '. Cell ',//The selector of the bricks to be arranged, confined to the container of the waterfall flow
Img_selector: ' img ',//selector of the picture to be loaded
auto_imgheight:true,//whether you need to automatically calculate the height of the picture
fadein:true,//whether fade load
fadein_speed:600,//fade rate, per millisecond
Insert_type:1,//Brick insert mode, 1 for insertion shortest that 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 incoming parameter is loaded
},
//
waterfall=$.waterfall={},
$container =null;//Container
Waterfall.load_index=0,//load times
$.fn.extend ({
Waterfall:function (opt) {
opt=opt| | {};
Setting=$.extend (setting,opt);
$container =waterfall. $container =$ (this);
Waterfall. $columns =creatcolumn ();
Render ($ (this). Find (Setting.cell_selector). Detach (), false); Force no fade if existing element is rearrangement
Waterfall._scrolltimer2=null;
$ (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 ()//Number of columns
Looping to create columns
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>";
}
$container. prepend (HTML);//Insert Column
return $ ('. ') +setting.column_classname, $container);//Column collection
}
function Calculatecolumns () {//Calculate required number of columns
var Num=math.floor ($container. innerwidth ())/(Setting.column_width+setting.column_space));
if (num<1) {num=1;}//Guaranteed at least one column
return num;
}
function Render (Elements,fadein) {//Render element
if (!$ (elements). length) return;//no elements
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, then the height of the column can be computed without having to wait for the picture to 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
}
Return true;//continue
}
if ($ (this) [0].nodename.tolowercase () = = ' img ' | | $ (this). Find (Setting.img_selector). length>0) {//itself is a picture or contains a picture
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 size
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
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{//Don't 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 (elem) {//Asynchronous data rendering interface functions
Render (Elem,true);
}
function Insert ($element, Fadein) {//Insert element into 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 elements
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 computed 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 resources
$.waterfall.load_index++;
Return Setting.getresource ($.waterfall.load_index,public_render);
}
waterfall._scrolltimer=null;//Lazy 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);
}
function OnResize () {//Window zoom rearrange
if (Calculatecolumns () ==waterfall.column_num) return; Column number unchanged, no rearrangement required
var $cells =waterfall. $container. Find (Setting.cell_selector);
Waterfall. $columns. Remove ();
Waterfall. $columns =creatcolumn ();
Render ($cells, false); Force fade When you rearrange existing elements
}
}) (JQuery);
Looks like the code posted in the format a bit messy, ah first ignore. If the code above is not clear, you can view the source file directly on the demo page.
How to use Plug-ins:
Copy Code code as follows:
$ (selector). Waterfall (opt); Where selector is the selector of the waterfall flow container, opt for the configuration parameter object
Required HTML structure: The HTML structure can be an empty container element, such as <div id= "container" ></div>, where the brick element is dynamically loaded. Of course, you can put some bricks in advance, such as the demo page
Copy Code code as follows:
<div id= "Container" >
<div class= "Cell" ><p>00</p></div>
<div class= "Cell" ><p>01</p></div>
<div class= "Cell" ><p>02</p></div>
<div class= "Cell" ><p>03</p></div>
<div class= "Cell" ><p>04</p></div>
<div class= "Cell" ><p>05</p></div>
<div class= "Cell" ><p>06</p></div>
<div class= "Cell" ><p>07</p></div>
<div class= "Cell" ><p>08</p></div>
<div class= "Cell" ><p>09</p></div>
<div class= "Cell" ><p>10</p></div>
<div class= "Cell" ><p>11</p></div>
<div class= "Cell" ><p>12</p></div>
<div class= "Cell" ><p>13</p></div>
<div class= "Cell" ><p>14</p></div>
<div class= "Cell" ><p>15</p></div>
<div class= "Cell" ><p>16</p></div>
<div class= "Cell" ><p>17</p></div>
<div class= "Cell" ><p>18</p></div>
<div class= "Cell" ><p>19</p></div>
</div>
The following details of the configuration parameter object opt for the role of each property and its default value.
column_width: 204//Waterfall flow is composed of columns that specify the width of each column, which directly affects the number of columns in the waterfall flow
column_classname: ' Waterfall_column '//column class name, easy to customize style
column_space: 10//spacing between column and column
cell_selector: '. Cell '//The selector of the bricks to be arranged, defined in the Waterfall flow container, that is, the plug-in is through this selector to get the brick elements, and is in the waterfall flow in the container to find this selector matching elements.
img_selector: ' img '//The selector of the picture to be loaded. If the subject matter of the brick element that you are going to load is a picture that is not fixed in size, the parameter is the selector of these pictures, and the plugin needs to get these pictures to compute.
auto_imgheight: TRUE//Whether you need to automatically calculate the height of the picture, and if the size of the picture is fixed, set the argument to False
Fadein: TRUE//whether fade load
fadein_speed: 600//fade rate, per millisecond
insert_type: 1//Brick insert mode, 1 for insertion shortest that column, 2 for sequential insertion
getresource: function (index,render) {}//Get dynamic resource function, you must return a collection of bricks elements, the first argument passed is index to the number of times loaded, the second parameter is render function, It can accept a brick element set as an argument, and if you are using AJAX to load the data, then manually call the function to render it when you get the data. This function is automatically triggered every time the bottom of the waterfall is reached to load more resources.
Time of Spit slot:
The waterfall stream is loaded with the same width, highly different pictures, if you can know the height of the picture in advance, it is much simpler, but if not, you must wait until the picture is loaded to calculate the height of the picture, which is the most annoying waterfall flow, and precisely because of this, if it is those who do not know the height of the picture, The order of the inserts may be somewhat confusing, and each refresh order is different, because the order of each picture to be loaded is not fixed, perhaps this time hurry up, the next time that faster. So if the picture height does not know beforehand, then the entire height of the brick will not know, must wait for the picture in the bricks to be completed before the height of the bricks can be calculated. If this is the case, but you want to ensure the insertion order of the bricks, it is recommended that you insert the bricks in a sequential fashion by setting the insert_type parameter to 2. Because it is a plug-in, so to consider the use of simple, but the more simple to use, plug-ins inside will be more complex, loopholes, bugs will also increase, so I will continue to improve the plug-in.
This plugin supports ie6+, Chrome, Firefox, Opera, Safari and other mainstream browsers.
