Using js to achieve waterfall effect
|
This article example shares the specific code of js to achieve the waterfall flow effect for your reference. The specific content is as follows
Source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 70px;
float: left;
margin-left: 4px;
border-top: 1px solid #000;
}
ul,
ol,
li {
list-style-type: none;
}
li {
width: 70px;
display: block;
text-align: center;
}
</style>
</head>
<body>
<ul class="box"></ul>
<ul class="box"></ul>
<ul class="box"></ul>
<ul class="box"></ul>
<button onclick="reloadPage()">Refresh page</button>
</body>
</html>
<script>
var boxes = document.querySelectorAll(".box");
//Create the minimum value var min = 0;
//Create a color array var colour = ["red", "yellow", "orange", "blue", "purple", "green","#cdee","#feda","ccc","#eda","#639","#33f","#f38","#ca0"]
for (j = 1; j <= 50; j++) {
var lis = document.createElement("li"); //Create li with numbers
lis.innerHTML = j;
lis.style.height = Math.random() * 40 + 30 + "px"; //Get random height, the minimum height is 30px
lis.style.backgroundColor = colour[parseInt(Math.random() * colour.length-1)]; //Get random color for (var i = 0; i < boxes.length; i++) {
console.log(boxs[i].clientHeight);
// offsetHeight gets the element height number if (boxs[i].offsetHeight < boxes[min].offsetHeight) {
min = i; //Get the sequence number of the array element with the smallest height}
}
boxes[min].appendChild(lis) //Add li to the shortest ol}
function reloadPage() {
location.reload(); // refresh}
</script>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:
|
<<: Detailed Analysis of Explain Execution Plan in MySQL
>>: Detailed explanation of the solution to Tomcat's 404 error
Recommend
Solution to the Docker container being unable to access the host port
I recently encountered a problem at work. The doc...
Develop a vue component that encapsulates iframe
Table of contents 1. Component Introduction 2. Co...
How to display JSON data in HTML
background: Sometimes we need to display json dat...
Detailed explanation of the idea of distributed lock in MySQL with the help of DB
Preface Whether it is a stand-alone lock or a dis...
How to mount a new disk on a Linux cloud server
background A new server was added in the company,...
MySQL Community Server 5.7.19 Installation Guide (Detailed)
MySQL official website zip file download link htt...
SQL method for calculating timestamp difference
SQL method for calculating timestamp difference O...
javascript:void(0) meaning and usage examples
Introduction to void keyword First of all, the vo...
How to implement HTML to detect that input is complete and automatically fill in the next content
In the previous article, we have realized the sim...
How is MySQL transaction isolation achieved?
Table of contents Concurrent scenarios Write-Writ...
Use Vue3 for data binding and display list data
Table of contents 1. Comparison with Vue2 1. New ...
Detailed explanation of the application and difference between filter attribute and backdrop-filter in CSS
There are some differences between filter and bac...
The process of deploying and running countly-server in docker in win10
I have just come into contact with and become fam...
Linux CentOS6.5 yum install mysql5.6
This article shares the simple process of install...
Record a slow query event caused by a misjudgment of the online MySQL optimizer
Preface: I received crazy slow query and request ...