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
Implementation of Nginx configuration Https security authentication
1. The difference between Http and Https HTTP: It...
Detailed explanation of the concept, principle and usage of MySQL triggers
This article uses examples to explain the concept...
Implementation of positioning CSS child elements relative to parent elements
Solution Add position:relative to the parent elem...
Sample code for realizing book page turning effect using css3
Key Takeaways: 1. Mastering CSS3 3D animation 2. ...
MySQL index usage instructions (single-column index and multi-column index)
1. Single column index Choosing which columns to ...
How to uninstall MySQL cleanly (tested and effective)
How to uninstall Mysql perfectly? Follow the step...
Method to detect whether ip and port are connectable
Windows cmd telnet format: telnet ip port case: t...
VMware15 installation of Deepin detailed tutorial (picture and text)
Preface When using the Deepin user interface, it ...
Ubuntu Basic Tutorial: apt-get Command
Preface The apt-get command is a package manageme...
CSS to achieve Tik Tok subscription button animation effect
I was watching Tik Tok some time ago and thought ...
Write a simple calculator using JavaScript
The effect is as follows:Reference Program: <!...
Use of Linux bzip2 command
1. Command Introduction bzip2 is used to compress...
Detailed understanding and comparative analysis of servers Apache, Tomcat and Nginx
1 Question The company's server uses Apache, ...
Comprehensive understanding of html.css overflow
Comprehensive understanding of html.css overflow ...
Rendering Function & JSX Details
Table of contents 1. Basics 2. Nodes, trees, and ...