This article has shared with you the specific code for JS to implement waterfall flow layout for your reference. The specific content is as follows
1. Ideas for realizing waterfall flow layout
After the data is ready
. Bind scroll event
. Determine whether the page is at its peak(The scroll distance + is the height of the area == the top of the last element)
. Load new data and render new pages
.Re-execute the waterfall flow effect
2. Code(You can run directly after changing the image path)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cont{margin: 0 auto;background: #ccc;position: relative;}
.cont::after{content: "";display: block;clear: both;}
.box{float: left;padding: 6px;}
.imgbox{border: solid 1px black;padding: 6px;border-radius: 6px;}
.imgbox img{width: 200px;display: block;}
</style>
<script src="data/"></script>
<script>
// W1. Prepare data // W2. Bind scroll event // W3. Determine whether the page is at the end (the scrolling distance + is the height of the area == the top of the last element) // W4. Load new data and render new page // W5. Re-execute the waterfall flow effect onload = function(){
new Waterfall;
}
class Waterfall{
constructor(){
// 1. Select elements = (".box");
= (".cont");
= ;
= [];
// 2. Complete layout ();
();
}
addEvent(){
var that = this;
onscroll = function(){
var scrollT = ;
if( + scrollT > -300){
()
}
}
}
render(){
for(var i=0;i<;i++){
var img = ("img")
= data[i].src;
var imgbox = ("div")
= "imgbox";
var box = ("div")
= "box";
(img);
(imgbox);
(box);
}
// Initialize all = (".box");
= [];
// Re-render the waterfall flow structure ();
();
}
init(){
// Calculate the maximum number of lines and then calculate the maximum width = ;
= [0].offsetWidth;
= parseInt( / )
= * + "px";
// 3. Distinguish the first line ()
// 4. Distinguish between other rows ();
}
firstLine(){
// 5. Get the height of all elements and save it for(var i=0;i<;i++){
([i].offsetHeight);
}
}
otherLine(){
for(var i=;i<;i++){
// 6. Get all the heights of the first row // ()
// Calculate the index of the minimum value and the minimum value // var min = getMin();
// var min = (null,);
var min = (...);
var minIndex = (min);
// (minIndex);
// 7. Set the positioning of elements [i]. = "absolute";
// 8. Set the top and left of the element [i]. = min + "px";
[i]. = minIndex * + "px";
// 9. Modify the minimum value [minIndex] += [i].offsetHeight;
}
= ;
}
}
function getMin(arr){
// Intercept the array first (for deep copy) // Then sort the intercepted new array // Find No. 0 // Go back out return (0).sort((a,b)=>a-b)[0];
}
</script>
</head>
<body>
<div class="cont">
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/" alt="">
</div>
</div>
</div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.