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
How to fix the width of table in ie8 and chrome
When the above settings are used in IE8 and Chrome...
Detailed explanation of how to use $props, $attrs and $listeners in Vue
Table of contents background 1. Document Descript...
What are the file attributes of crw, brw, lrw, etc. in Linux?
What is a file? All files are actually a string o...
CSS code abbreviation div+css layout code abbreviation specification
Using abbreviations can help reduce the size of yo...
Is it necessary to give alt attribute to img image tag?
Do you add an alt attribute to the img image tag? ...
Example of how to configure the MySQL database timeout setting
Table of contents Preface 1. JDBC timeout setting...
Vue custom components use event modifiers to step on the pit record
Preface Today, when I was using a self-written co...
Solve the mysql user deletion bug
When the author was using MySQL to add a user, he...
Mini Program to implement Token generation and verification
Table of contents process Demo Mini Program Backe...
How to use an image button as a reset form button
When we make a form, we often set a submit button ...
How to implement Svelte's Defer Transition in Vue
I recently watched Rich Harris's <Rethinki...
How to solve the problem of ERROR 2003 (HY000) when starting mysql
1. Problem Description When starting MYSQL, a pro...
How to use React slots
Table of contents need Core Idea Two ways to impl...
Detailed explanation of how to use WeChat mini program map
This article example shares the specific implemen...
Web Design Experience: Efficiently Writing Web Code
Originally, this seventh chapter should be a deep ...