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
JavaScript Prototype Details
Table of contents 1. Overview 1.1 What is a proto...
SQL IDENTITY_INSERT case study
Generally speaking, once a column in a data table...
Tutorial on installing mongodb under linux
MongoDB is cross-platform and can be installed on...
Examples of using Docker and Docker-Compose
Docker is an open source container engine that he...
Detailed explanation of using scp command to copy files remotely in Linux
Preface scp is the abbreviation of secure copy. s...
Detailed explanation of Linux remote management and sshd service verification knowledge points
1. SSH remote management SSH Definition SSH (Secu...
Detailed steps to install MySql 5.7.21 in Linux
Preface The most widely used database in Linux is...
How to check if a table exists in MySQL and then delete it in batches
1. I searched for a long time on the Internet but...
How to use Docker to build a development environment (Windows and Mac)
Table of contents 1. Benefits of using Docker 2. ...
JS asynchronous code unit testing magic Promise
Table of contents Preface Promise chaining MDN Er...
Detailed explanation of how CocosCreator system events are generated and triggered
Table of contents environment summary Module Func...
Application of anchor points in HTML
Set Anchor Point <a name="top"><...
In-depth analysis of MySQL indexes
Preface We know that index selection is the work ...
Several ways to use require/import keywords to import local images in v-for loop
Table of contents Problem Description Method 1 (b...
Install nodejs and yarn and configure Taobao source process record
Table of contents 1. Download nodejs 2. Double-cl...