Js implements waterfall stream Layout

Waterfall streaming layout seems to be becoming more and more popular. If one project is implemented, it will be challenged. The so-called waterfall stream layout means that webpage loading is like a waterfall. The following code can realize adaptive width while loading the drop-down page with the mouse. & lt ;! DOCTYPEhtmlPUBLIC & quot;-W3CDTDX waterfall streaming layout seems to be becoming more and more popular. If one project is implemented, it will be challenged. The so-called waterfall streaming layout means that webpage loading is like a waterfall, and the following code can realize adaptive width while loading the drop-down page with the mouse

      
   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, // The getIndex: function () {var index = this. indexImage; if (index <10) {index = "00" + index;} else if (index <100) {index = "0" + index;} return index ;}, // check whether the appendDetect is scroll loaded: 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 to load append: function (column) {this. indexImage + = 1; var html = '', index = this. getIndex (), imgUrl = this. rootImage + "P _" + index + ". jpg "; // image size var aEle = document. createElement ("a"); 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;}, // load the initial 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) ;}}// var lengthStart, arrStart; for (lengthStart = 0; lengthStart
 
  
(100) {self. scrollTop = scrollTop; self. appendDetect () ;}}; return this ;}, // browser window size transformation 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 the label offset exception and consider the layout to change self. refresh () ;}}; return this ;}, init: function () {if (this. container) {this. create (). scroll (). resize () ;}}; waterFall. init (); script