I have seen Teacher Amy’s use of javascript to implement waterfall flow these days, so I followed the code out. I found that writing like this can only adapt to the screen when loading for the first time, and then changing the window size will not be able to adapt.
So I thought of using window.onresize to make the waterfall flow function freshly load to achieve the goal.
The code copy is 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 waterfall flow function will be re-adapted.
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var outdoor = document.getElementById('content');
//Add the stained data into html
for(var i=0;i<dataInt.data.length;i++){
var obox = document.createElement("div");
obox.className = "box";
outdoor.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 is OK when the screen is reduced, but a bug appears from the zoom-in
I didn't see that the top of the next few columns can't come back.
So I opened the development tool to see what happened.
There should not be style in the 5th div. It is because it was added to it when it was shrinking, but it was enlarged and it did not clear it, so it would appear if it was retained. So: I added the sentence aBox[i].style.cssText ='' to the waterfall flow function; so that every time I come in, I clear the style
The code copy is as follows:
function waterfall(parent,box){
//Take out all class boxes under content
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);
//Get the width of the box
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.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 height array 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 out the index value with the shortest height
//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 bug that cannot be returned after shrinking, and can adapt normally
Finally, I posted the whole javascript
The code copy is 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 waterfall flow function will be re-adapted.
window.onresize=function(){
// waterfall('content','box');
setTimeout(function() {waterfall('content','box');}, 200);
}
window.onscroll=function(){
if(checkScroll()){
var outdoor = document.getElementById('content');
//Add the stained data into html
for(var i=0;i<dataInt.data.length;i++){
var obox = document.createElement("div");
obox.className = "box";
outdoor.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 out all class boxes under content
var aParent = document.getElementById(parent);
var aBox = getBclass(aParent,box);
//Get the width of the box
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.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 height array 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 out the index value with the shortest height
//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 element according to 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<allElement.length;i++){
if(allElement[i].className == className){
boxarr.push(allElement[i]);
}
}
return boxarr;
}
//Find out the shortest index value
function getMinIndex(arr,value){
for(var i in arr){
if (arr[i]==value){
return i;
}
}
}
//Create a function that detects whether the wheel sliding is true or not and returns true or false
function checkScroll(){
var outdoor = 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;
}
Posted with css file
The code copy 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 #CCCCCCCC;
border-radius: 5px;
background: #ffff;
}
.pic img{
width: 220px;
height: auto;
border: 1px solid #eee;
}
Posted in html file
The code copy is 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>
<div>
<img src="img/01.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/02.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/03.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/04.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/05.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/06.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/07.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/08.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/09.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/10.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/11.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/12.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/13.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/14.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/15.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/16.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/17.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/18.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/19.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/20.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/21.jpg"/>
</div>
</div>
<div>
<div>
<img src="img/22.jpg"/>
</div>
</div>
</div>
</body>
</html>
Okay, thank you for watching. I have never written technical sharing articles before. There are many inconsiderate aspects that I hope you can correct them. The little novices who learn the front end give Y(^_^)Y