Problems and Solutions for implementing waterfall stream adaptive using javascript _ javascript skills

This article mainly introduces the problems and solutions for implementing Waterfall Stream self-adaptation in javascript. For more information about how to use javascript to implement Waterfall Stream, see Amy's guide in the next few days, I followed the code. It is found that this write can only adapt to the screen when loading for the first time, and the window size cannot be changed in the future.

So I thought of using window. onresize to re-load the waterfall function,

The code is as follows:

Window. onload = function (){
// Waterfall functions
Waterfall ('content', 'box ');
// Simulate data loading
Var dataInt = {"data": [{"src": "01.jpg" },{" src ":" 02.jpg" },{ "src": "03.jpg "}, {"src": "04.jpg" },{" src ":" 05.jpg" },{ "src": "06.jpg" },{" src ":" 07.jpg"}]}
// When the screen size changes, the waterfall function is executed to adapt to the new function.
Window. onresize = function (){
// Waterfall ('content', 'box ');
SetTimeout (function () {waterfall ('content', 'box') ;}, 200 );
}
Window. onscroll = function (){
If (checkScroll ()){
Var oparent = document. getElementById ('content ');
// Add the lavender data to html
For (var I = 0; I Var obox = document. createElement ("p ");
Obox. className = "box ";
Oparent. appendChild (obox );
Var opic = document. createElement ("p ");
Opic. className = "pic ";
Obox. appendChild (opic );
Var oImg = document. createElement ("img ");
OImg. src = "img/" + dataInt. data [I]. src;
Opic. appendChild (oImg );
}
Waterfall ('content', 'box ');
}
}
}

It works when the screen is reduced, but a BUG occurs when the screen is zoomed in.

I can't see the top of the following columns coming back,
So I opened the development tool to see what was going on,

3rd 4 5 p should not have a style, because it was added to him when the zoom-out was not cleared, so it would look like this if it was retained: I added the sentence aboxpolici}.style.css Text = ''in the waterfall workflow so that the style is cleared every time I come in.

The code is as follows:

Function waterfall (parent, box ){
// Retrieve all class boxes in the content
Var aParent = document. getElementById (parent );
Var aBox = getBclass (aParent, box );
// Obtain the box width
Var aBoxW = aBox [0]. offsetWidth;
// Use the browser's width to divide the box width to get the number of columns
Var cols = Math.floor(document.doc umentElement. clientWidth/aBoxW );
// Set the content width and center
AParent.style.css Text = 'width: '+ aBoxW * cols + 'px; height: auto; position: relative; margin: 0 auto; padding-right: 15px ';
// Create a height array for each column
Var hArr = [];
For (var I = 0; I aboxpolici2.16.style.css Text = '';
If (I HArr. push (aBox [I]. offsetHeight );
} Else {
Var minH = Math. min. apply (null, hArr );
Var index = getMinIndex (hArr, minH); // locate the highest and lowest index value.
// Console. log (aBoxW );
ABox [I]. style. position = 'absolute ';
ABox [I]. style. top = minH + 'px ';
ABox [I]. style. left = aBoxW * index + 'px ';
HArr [index] + = aBox [I]. offsetHeight;
}
}
}

In this way, the BUG that cannot be returned after reduction is solved, and the BUG can be properly adapted.

FinallyThe entire javascriptPost it

The code is as follows:

Window. onload = function (){
// Waterfall functions
Waterfall ('content', 'box ');
// Simulate data loading
Var dataInt = {"data": [{"src": "01.jpg" },{" src ":" 02.jpg" },{ "src": "03.jpg "}, {"src": "04.jpg" },{" src ":" 05.jpg" },{ "src": "06.jpg" },{" src ":" 07.jpg"}]}
// When the screen size changes, the waterfall function is executed to adapt to the new function.
Window. onresize = function (){
// Waterfall ('content', 'box ');
SetTimeout (function () {waterfall ('content', 'box') ;}, 200 );
}
Window. onscroll = function (){
If (checkScroll ()){
Var oparent = document. getElementById ('content ');
// Add the lavender data to html
For (var I = 0; I Var obox = document. createElement ("p ");
Obox. className = "box ";
Oparent. appendChild (obox );
Var opic = document. createElement ("p ");
Opic. className = "pic ";
Obox. appendChild (opic );
Var oImg = document. createElement ("img ");
OImg. src = "img/" + dataInt. data [I]. src;
Opic. appendChild (oImg );
}
Waterfall ('content', 'box ');
}
}

}
Function waterfall (parent, box ){
// Retrieve all class boxes in the content
Var aParent = document. getElementById (parent );
Var aBox = getBclass (aParent, box );

// Obtain the box width
Var aBoxW = aBox [0]. offsetWidth;
// Use the browser's width to divide the box width to get the number of columns
Var cols = Math.floor(document.doc umentElement. clientWidth/aBoxW );
// Set the content width and center
AParent.style.css Text = 'width: '+ aBoxW * cols + 'px; height: auto; position: relative; margin: 0 auto; padding-right: 15px ';
// Create a height array for each column
Var hArr = [];
For (var I = 0; I aboxpolici2.16.style.css Text = '';
If (I HArr. push (aBox [I]. offsetHeight );
} Else {
Var minH = Math. min. apply (null, hArr );
Var index = getMinIndex (hArr, minH); // locate the highest and lowest index value.
// Console. log (aBoxW );
ABox [I]. style. position = 'absolute ';
ABox [I]. style. top = minH + 'px ';
ABox [I]. style. left = aBoxW * index + 'px ';
HArr [index] + = aBox [I]. offsetHeight;
}
}
}
// Obtain the element based on the class
Function getBclass (parent, className ){
Var boxarr = new Array (); // used to store the obtained class
// Console. log (parent. prototype );
AllElement = parent. getElementsByTagName ('*');
For (var I = 0; I if (allElement [I]. className = className ){
Boxarr. push (allElement [I]);
}
}
Return boxarr;
}

// Find the highest and lowest index value
Function getMinIndex (arr, value ){
For (var I in arr ){
If (arr [I] = value ){
Return I;
}
}
}
// Create a function to check whether the rotation is true or false.
Function checkScroll (){
Var oparent = document. getElementById ("content ");
Var oBox = getBclass (oparent, 'box ');
Var lastoBoxTop = oBox [oBox. length-1]. offsetTop + Math. floor (oBox [oBox. length-1]. offsetHeight/2 );
// Console. log (lastoBoxTop );
Var scrollTop = document. body. scrollTop | document.doc umentElement. scrollTop;
Var height = document. body. clientHeight | document.doc umentElement. clientHeight;
// Console. log (scrollTop );
Return (lastoBoxTop }

Css filePost it

The code is as follows:

* {Margin: 0; padding: 0 ;}
Body {background-color: # eee ;}
. Content {
Position: relative;
}
. Box {
Padding: 15px 0 0 15px;
Float: left;
}
. Pic {
Padding: 10px;
Border: 1px solid # ccc;
Box-shadow: 0 0 5px # CCCCCC;
Border-radius: 5px;
Background: # fff;
}
. Pic img {
Width: 220px;
Height: auto;
Border: 1px solid # eee;
}

Html filePost it

The code is as follows:

Javascript Waterfall Stream