Native JavaScript+LESS implements waterfall flow
- 2020-03-30 04:35:03
- OfStack
HTML(note the package relationship for js calls)
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="images/0.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="images/3.jpg" alt="">
</div>
</div>
</div>
</body>
LESS(LESS precompiled)
* {
margin: 0;
padding: 0;
}
#main {
position: relative;
}
.box {
padding:15px 0 0 15px;
float:left;
}
.pic {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 0px 5px #ccc;
img {
width:165px;
height:auto;
}
}
JavaScript(self-explanatory annotations)
(there are some defects in the function, which is only used for learning and understanding)
window.onload = function () {
waterfall("main","box");
//Call custom functions; Each of the box elements under main; < br / >
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
//Simulate json data; < br / >
window.onscroll = function () {
if (checkScrollSlide) {
//Call custom functions; Determine whether the scroll is out of range based on the return value of the function; < br / >
var oParent = document.getElementById("main");
for (var i = 0; i < dataInt.data.length; i++) {
var oBox = document.createElement("div");
oBox.className = "box";
oParent.appendChild(oBox);
//Create box block
var oPic = document.createElement("div");
oPic.className = "pic";
oBox.appendChild(oPic);
//Create PIC block
var oImg = document.createElement("img");
//Create the img element
oImg.src = "images/"+dataInt.data[i].src;
//Set the picture reference; < br / >
oPic.appendChild(oImg);
};
waterfall("main","box");
//The dynamically generated data blocks are arranged in a stream. < br / >
};
};
};
//Flow layout main function, automatically adjust the position of the data block; < br / >
function waterfall (parent,box) {
//Remove all box elements from main;" Parent "for parent,box for box element; < br / >
var oParent = document.getElementById(parent);
//Assign the parent element to the variable oParent; < br / >
var oBoxs = getByClass(oParent,box);
//Get each box element under the parent level through a custom function; You get the set of all the box elements; < br / >
//Again assign the set of the resulting box elements to oBoxs; (because of scope problems, variables are not Shared); < br / >
// console.log(oBoxs.length);
//Print the number of box elements in the console for debugging. < br / >
var oBoxW = oBoxs[0].offsetWidth;
//Calculate the width of each column; OffsetWidth contains the width of the inside margin; < br / >
//The console. The log (oBoxW); Test; < br / >
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//Calculate the number of columns displayed on the entire page (page width /box width); < br / >
oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";
//The width of the parent element main = the width of each column * the number of columns; And center left and right; < br / >
var hArr = [];
//An array of the heights of each column; < br / >
for (var i = 0; i < oBoxs.length; i++) {
//Traversing oBoxs array; < br / >
if (i<cols) {
//The first one of each column in the first row is the one that satisfies the criteria; < br / >
hArr.push(oBoxs[i].offsetHeight);
//The height of each column is put into the array; < br / >
}else{
//The box element here is no longer in the first row; < br / >
var minH = Math.min.apply(null,hArr);
//Get the minimum height of the first row and assign it to the variable; < br / >
// console.log(minH);
var index = getMinhIndex(hArr,minH);
//Call the custom function to get the index value of this variable; < br / >
oBoxs[i].style.position = "absolute";
oBoxs[i].style.top = minH+"px";
oBoxs[i].style.left = oBoxW*index+"px";
//Sets the position of the current element; < br / >
//The left value of the current element = the index value of the top element * the width of each column; < br / >
//oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";
//The second gets the left value of the current element; < br / >
//Add a box element to the index column; < br / >
hArr[index]+=oBoxs[i].offsetHeight;
//The updated height of each column = the original height of each column + the height of the box element added later; < br / >
};
};
};
//Js natively gets elements through Class; < br / >
function getByClass (parent,claName) {
//Get the element by class; Gets the element of claName under the parent parent's container; < br / >
var boxArr = new Array();
//Declare an array to store all the fetched class elements as boxes; < br / >
var oElements = parent.getElementsByTagName("*")
//Declare variables to store all child elements (*) under this parent element. < br / >
for (var i = 0; i < oElements.length; i++) {
//Iterate over group oElements; < br / >
if (oElements[i].className==claName) {
//If the calss class for an element in the array is the same as the argument claName; < br / >
boxArr.push(oElements[i]);
//The traversed box element is grouped into a boxArr array. < br / >
};
};
return boxArr;
//After calling the array, through a series of functions, traversal; Returns the resulting array to the called function; < br / >
};
//Gets the index value of the array element; < br / >
function getMinhIndex (arr,val) {
//Arr is the superseries; Val is the current element; < br / >
for(var i in arr){
//It starts at 0; < br / >
if(arr[i]==val){
//Find the index value of the current element in the array; < br / >
return i;
//The return value of the function is the index value of the current element. < br / >
};
};
};
//Check whether the condition of rolling load data block is available; < br / >
function checkScrollSlide () {
var oParent = document.getElementById("main");
var oBoxs = getByClass(oParent,"box");
var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
//The height of the last box element from the top of the page (find the offsetTop of the last box(oboxs.lenght -1))+ half of itself; < br / >
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//The length of the browser scroll bar; < br / >
// console.log(scrollTop);
var height = document.body.clientHeight || document.documentElement.clientHeight;
//The height of the browser viewport; < br / >
// console.log(height);
return (lastBoxH<scrollTop+height)?true:false;
//Whether the page scrolling distance is greater than the offsetTop of the last box element; < br / >
};
Conclusion:
Waterfall is a great way to show your photos. Here's one way to do waterfall (the length of each line equals the length of the browser window).
My idea is to insert picture by picture. When the picture of this row keeps the ratio of length to width and the height is lower than 250, a loop is completed, that is, this row is inserted.
Then go to the next loop and insert the next row.