Javascript is a simple way to implement waterfall stream. Example: _ javascript tips-js tutorial

It seems that waterfall stream layout is a bit late, but every technology is constantly evolving towards "refined" and "simplified". before it reaches its limit, it takes a long process. Therefore, from this perspective, when the waterfall stream is applied more and more, we should discuss it more, discuss how to improve it. Let's look at the method of implementing waterfall stream with JS below and hope to criticize it.

The Code is as follows:

Waterfall flow layout Test

Script
Var waterFall = {
Container: document. getElementById ("container "),
ColumnNumber: 1,
ColumnWidth: 210,
// P_001.jpg ~ P_160.jpg
RootImage: "test /",
IndexImage: 0,

ScrollTop: document.doc umentElement. scrollTop | document. body. scrollTop,
DetectLeft: 0,

LoadFinish: false,

// Returns the image name in a fixed format.
GetIndex: function (){
Var index = this. indexImage;
If (index <10 ){
Index = "00" + index;
} Else if (index <100 ){
Index = "0" + index;
}
Return index;
},

// Check whether to perform rolling Loading
AppendDetect: function (){
Var start = 0;
For (start; start <this. columnNumber; start ++ ){
Var eleColumn = document. getElementById ("waterFallColumn _" + start );
If (eleColumn &&! This. loadFinish ){
If (eleColumn. offsetTop + eleColumn. clientHeight <this. scrollTop + (window. innerHeight | document.doc umentElement. clientHeight )){
This. append (eleColumn );
}
}
}

Return this;
},

// Scroll Loading
Append: function (column ){
This. indexImage + = 1;
Var html = '', index = this. getIndex (), imgUrl = this. rootImage +" P _ "+ index +". jpg ";

// Image size
Var aEle = document. createElement ("");
AEle. href = "###";
AEle. className = "pic_a ";
AEle. innerHTML =' '+ Index +'';
Column. appendChild (aEle );

If (index >=160 ){
// Alert ("the image is light loaded! ");
This. loadFinish = true;
}

Return this;
},

// Page loading initial creation
Create: function (){
This. columnNumber = Math. floor (document. body. clientWidth/this. columnWidth );

Var start = 0, htmlColumn = '', self = this;
For (start; start <this. columnNumber; start + = 1 ){
HtmlColumn = htmlColumn + ''+
Function (){
Var html = '', I = 0;
For (I = 0; I <5; I + = 1 ){
Self. indexImage = start + self. columnNumber * I;
Var index = self. getIndex ();
Html = html +' '+ Index +'';
}
Return html;
} () +
'';
}
HtmlColumn + = '';

This. container. innerHTML = htmlColumn;

This. detectLeft = document. getElementById ("waterFallDetect"). offsetLeft;
Return this;
},

Refresh: function (){
Var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
For (start; start <this. columnNumber; start + = 1 ){
Var arrColumn = document. getElementById ("waterFallColumn _" + start). innerHTML. match (// gi );
If (arrColumn ){
MaxLength = Math. max (maxLength, arrColumn. length );
// ArrTemp is a two-dimensional array.
ArrTemp. push (arrColumn );
}
}

// Needs to be sorted again
Var lengthStart, arrStart;
For (lengthStart = 0; lengthStart For (arrStart = 0; arrStart If (arrTemp [arrStart] [lengthStart]) {
ArrHtml. push (arrTemp [arrStart] [lengthStart]);
}
}
}


If (arrHtml & arrHtml. length! = 0 ){
// Number of new columns
This. columnNumber = Math. floor (document. body. clientWidth/this. columnWidth );

// Calculate the number of rows in each column
// Round down
Var line = Math. floor (arrHtml. length/this. columnNumber );

// Reassemble HTML
Var newStart = 0, htmlColumn = '', self = this;
For (newStart; newStart <this. columnNumber; newStart + = 1 ){
HtmlColumn = htmlColumn + ''+
Function (){
Var html = '', I = 0;
For (I = 0; I Html + = arrHtml [newStart + self. columnNumber * I];
}
// Whether to supplement the remainder
Html = html + (arrHtml [newStart + self. columnNumber * line] | '');

Return html;
} () +
'';
}
HtmlColumn + = '';

This. container. innerHTML = htmlColumn;

This. detectLeft = document. getElementById ("waterFallDetect"). offsetLeft;

// Detection
This. appendDetect ();
}
Return this;
},

// Scroll Loading
Scroll: function (){
Var self = this;
Window. onscroll = function (){
// To Improve the Performance, reprocess the process at a distance greater than 100 pixels before and after rolling.
Var scrollTop = document.doc umentElement. scrollTop | document. body. scrollTop;
If (! This. loadFinish & amp; Math. abs (scrollTop-self. scrollTop) & gt; 100 ){
Self. scrollTop = scrollTop;
Self. appendDetect ();
}

};
Return this;
},

// Change the browser window size
Resize: function (){
Var self = this;
Window. onresize = function (){
Var eleDetect = document. getElementById ("waterFallDetect"), detectLeft = eleDetect & eleDetect. offsetLeft;
If (detectLeft & Math. abs (detectLeft-self. detectLeft)> 50 ){
// Detect abnormal label offset and consider the layout to be changed
Self. refresh ();
}
};
Return this;
},
Init: function (){
If (this. container ){
This. create (). scroll (). resize ();
}
}
};
WaterFall. init ();
Script