js to achieve waterfall flow layout (infinite loading)
|
This article example shares the specific code of js to implement waterfall flow layout for your reference. The specific content is as follows 1. Implement waterfall flow layout ideas After preparing the data . Bind scroll events 2. Code (can be 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/data.js"></script>
<script>
// W1. Prepare data // W2. Bind scroll events // W3. Determine whether the page has reached the bottom (scroll distance + height of the scroll area == top of the last element)
// W4. Load new data and render new page // W5. Re-execute waterfall effect onload = function(){
new Waterfall;
}
class Waterfall{
constructor(){
// 1. Select elements this.box = document.querySelectorAll(".box");
this.cont = document.querySelector(".cont");
this.clientH = document.documentElement.clientHeight;
this.heightArr = [];
// 2. Complete the layout this.init();
this.addEvent();
}
addEvent(){
var that = this;
onscroll = function(){
var scrollT = document.documentElement.scrollTop;
if (that.clientH + scrollT > that.scrollH - 300) {
that.render()
}
}
}
render(){
for(var i=0;i<data.length;i++){
var img = document.createElement("img")
img.src = data[i].src;
var imgbox = document.createElement("div")
imgbox.className = "imgbox";
var box = document.createElement("div")
box.className = "box";
imgbox.appendChild(img);
box.appendChild(imgbox);
this.cont.appendChild(box);
}
// Initialize all this.box = document.querySelectorAll(".box");
this.heightArr = [];
// Re-render the waterfall structure this.firstLine();
this.otherLine();
}
init(){
// Calculate the maximum number of cells that can fit in a row, and then calculate the maximum width this.clientW = document.documentElement.clientWidth;
this.boxW = this.box[0].offsetWidth;
this.maxNum = parseInt(this.clientW / this.boxW)
this.cont.style.width = this.boxW * this.maxNum + "px";
// 3. Distinguish the first line this.firstLine()
// 4. Distinguish other lines this.otherLine();
}
firstLine(){
// 5. Get the height of all elements and save them for(var i=0;i<this.maxNum;i++){
this.heightArr.push(this.box[i].offsetHeight);
}
}
otherLine(){
for(var i=this.maxNum;i<this.box.length;i++){
// 6. Get all the heights of the first row // console.log(this.heightArr)
// Calculate the minimum value and index of the minimum value // var min = getMin(this.heightArr);
// var min = Math.min.apply(null,this.heightArr);
var min = Math.min(...this.heightArr);
var minIndex = this.heightArr.indexOf(min);
// console.log(minIndex);
// 7. Set the element's positioning this.box[i].style.position = "absolute";
// 8. Set the top and left of the element
this.box[i].style.top = min + "px";
this.box[i].style.left = minIndex * this.boxW + "px";
// 9. Modify the minimum value this.heightArr[minIndex] += this.box[i].offsetHeight;
}
this.scrollH = document.documentElement.scrollHeight;
}
}
function getMin(arr){
// First intercept the array (for deep copy)
// Then sort the intercepted new array // Find the 0th position // Return return arr.slice(0).sort((a,b)=>ab)[0];
}
</script>
</head>
<body>
<div class="cont">
<div class="box">
<div class="imgbox">
<img src="../imgs/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/10.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/2.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/3.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/1.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="imgbox">
<img src="../imgs/10.jpg" alt="">
</div>
</div>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to use Dockerfile to build images in Docker
Recommend
How to use DPlayer.js video playback plug-in
DPlayer.js video player plug-in is easy to use Ma...
Detailed explanation of how to use Docker to build a simple Java development and compilation environment
There are many versions of the Java language. In ...
Steps to transfer files and folders between two Linux servers
Today I was dealing with the issue of migrating a...
Several common methods for passing additional parameters when submitting a form
When submitting a form, you may encounter situatio...
Goodbye Docker: How to Transform to Containerd in 5 Minutes
Docker is a very popular container technology. Th...
11 common CSS tips and experience collection
1. How do I remove the blank space of a few pixels...
Mini Program implements list countdown function
This article example shares the specific code for...
Method to detect whether ip and port are connectable
Windows cmd telnet format: telnet ip port case: t...
How to add indexes to MySQL
Here is a brief introduction to indexes: The purp...
Solve the problem of inconsistent MySQL storage time
After obtaining the system time using Java and st...
Error mysql Table 'performance_schema...Solution
The test environment is set up with a mariadb 5.7...
Detailed explanation of the getBoundingClientRect() method in js
1. getBoundingClientRect() Analysis The getBoundi...
How to implement Docker container self-start
Container auto-start Docker provides a restart po...
MySQL commonly used SQL and commands from entry to deleting database and running away
Table of contents Start and stop Database related...
The correct way to use MySQL indexes and detailed explanation of index principles
1. Introduction Why do we need indexes? In genera...