The problem and solution _javascript technique of JavaScript realizing waterfall flow adaptive

These days I saw Amy Teacher's use of JavaScript to achieve waterfall flow, I followed the code to knock out. It is found that this writing can only fit into the screen for the first time, then the window size can not be adapted.

So I thought of using window.onresize to get the waterfall flow function to reload to achieve the goal,

Copy Code code as follows:

Window.onload=function () {


Waterfall Flow function


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 new waterfall flow function achieves the new adaptation 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 infected data to the HTML


for (Var i=0;i<dataint.data.length;i++) {


var Obox = document.createelement ("div");


Obox.classname = "box";


Oparent.appendchild (Obox);


var opic = document.createelement ("div");


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's OK when the screen shrinks, but there's a bug in the zoom out.

See the top of the next few columns won't come back,
So I opened the development tool to see what was going on,

The 3rd 4 5 div should not have style, because it was added to the time of narrowing, and magnified he did not clear so that will appear this way: I added a sentence abox[i].style.csstext = "" In the waterfall flow function; Make the style clear every time you come in.

Copy Code code as follows:

function Waterfall (parent,box) {


Take all class box out of the content


var aparent = document.getElementById (parent);


var abox = Getbclass (Aparent,box);


Get the width of the box


var aboxw = abox[0].offsetwidth;


In the browser, but width divided by box width to get the number of columns


var cols = Math.floor (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/ABOXW);


Set the width and center of the content


AParent.style.cssText = ' width: ' +aboxw*cols+ ' px;height:auto;position:relative; margin:0 auto;padding-right:15px ';


Create an array of heights for each column


var harr=[];


for (var i=0; i<abox.length;i++) {


Abox[i].style.csstext = ';


if (i<cols) {


Harr.push (Abox[i].offsetheight);


}else{


var MinH = Math.min.apply (Null,harr);


var index = Getminindex (Harr,minh); Find the highest 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;


}


}


}

This solves the narrowing of the bug back, can be normal adaptive

Finally, I posted the whole JavaScript .

Copy Code code as follows:

Window.onload=function () {


Waterfall Flow function


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 new waterfall flow function achieves the new adaptation 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 infected data to the HTML


for (Var i=0;i<dataint.data.length;i++) {


var Obox = document.createelement ("div");


Obox.classname = "box";


Oparent.appendchild (Obox);


var opic = document.createelement ("div");


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) {


Take all class box out of the content


var aparent = document.getElementById (parent);


var abox = Getbclass (Aparent,box);





Get the width of the box


var aboxw = abox[0].offsetwidth;


In the browser, but width divided by box width to get the number of columns


var cols = Math.floor (DOCUMENT.DOCUMENTELEMENT.CLIENTWIDTH/ABOXW);


Set the width and center of the content


AParent.style.cssText = ' width: ' +aboxw*cols+ ' px;height:auto;position:relative; margin:0 auto;padding-right:15px ';


Create an array of heights for each column


var harr=[];


for (var i=0; i<abox.length;i++) {


Abox[i].style.csstext = ';


if (i<cols) {


Harr.push (Abox[i].offsetheight);


}else{


var MinH = Math.min.apply (Null,harr);


var index = Getminindex (Harr,minh); Find the highest 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;


}


}


}


Get the element from class


function Getbclass (parent,classname) {


var Boxarr = new Array (); Used to store the acquired class


Console.log (Parent.prototype);


Allelement=parent.getelementsbytagname (' * ');


for (Var i=0;i<allelement.length;i++) {


if (Allelement[i].classname = = ClassName) {


Boxarr.push (Allelement[i]);


}


}


return Boxarr;


}





Find the highest index value


function Getminindex (arr,value) {


for (var i in arr) {


if (Arr[i]==value) {


return i;


}


}


}


To establish a function to detect whether the wheel sliding is true or not


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.documentElement.scrollTop;


var height = document.body.clientheight| | Document.documentElement.clientHeight;


Console.log (scrolltop);


Return (lastoboxtop<scrolltop+height) True:false;


}

CSS File posted

Copy Code code 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 file posted

Copy Code code as follows:

<! DOCTYPE html>


<html>


<head>


<meta charset= "Utf-8"/>


<title>javascript Waterfall Flow </title>


<link rel= "stylesheet" type= "Text/css" href= "Css/pubuli.css"/>


<script type= "Text/javascript" src= "Js/my.js" ></script>


</head>


<body>


<div id= "Content" >


<div class= "box" >


<div class= "pic" >


<img src= "Img/01.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/02.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/03.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/04.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/05.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/06.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/07.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/08.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/09.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/10.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/11.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/12.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/13.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/14.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/15.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/16.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/17.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/18.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/19.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/20.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/21.jpg"/>


</div>


</div>


<div class= "box" >


<div class= "pic" >


<img src= "Img/22.jpg"/>


</div>


</div>


</div>





</body>


</html>

All right, thanks for watching, I've never written a technology-sharing article before, there are a lot of bad places I hope everyone can correct me. Learn the front end of the little rookie to the Y (^_^) y