利用js写一个根据高度插入的瀑布流

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>瀑布流</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			ul{
				list-style: none;
			}
			.root{
				width: 1000px;
				border: 2px solid gold;
				/*高度需要根据随机不断变化 */
				margin: 30px auto;
				overflow: hidden;
				/*弹性布局  有坑!!!*/
				/*display: flex;
				justify-content: space-around;*/
			}
			.root ul{
				width: 240px;
				border: 1px solid seagreen;
				float: left;
				color: white;
				margin: 4px;
				text-align: center;
				font-size: 90px;
			}
		</style>
	</head>
	<body>
		<!--底部的div-->
		<div class="root">
			<ul></ul>
			<ul></ul>
			<ul></ul>
			<ul></ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	
	//1.获取标签
	var ulArray = document.querySelectorAll("ul");
	//2.定义变量
	
	//3.函数
	//封装随机数
	function randomNum(min, max){
		return Math.floor(Math.random() * (max - min + 1) + min);
	}
	//封装随机背景色
	function randomColor(){
		var red = randomNum(0, 255);
		var green = randomNum(0, 255);
		var blue = randomNum(0, 255);
		return "rgb("+ red + "," + green + "," + blue + ")";
	}
	
	//循环50次  准备创建50个li
	for(var i = 0; i < 50; i++){
		var li = document.createElement("li");
		li.innerHTML = i + 1;
		li.style.backgroundColor = randomColor();
		//随机一个高度
		var height = randomNum(100, 500);
		li.style.lineHeight = height + "px";
		li.style.height = height + "px";
		//想想办法!!看哪个ul高度最小!! 谁最矮  就把新建的li放在哪个ul中!!
		//定义变量    每次循环都假设下标0的ul 最矮!!
		var index = 0; //用来记录最矮的ul的下标!!!
		//循环遍历 4个ul  下标0--3
		for(var j = 1; j < ulArray.length; j++){
			if(ulArray[index].offsetHeight > ulArray[j].offsetHeight){
				index = j;
			}
		}
		//index 就记录着 最矮的 ul的下标!!　类似10个随机数,找最大最小值以及位置
		ulArray[index].appendChild(li);
		
	}
	
</script>

运行结果:

前端三剑客
#JS
利用js写一个根据高度插入的瀑布流
http://ultracode.cn/2020/11/21/JS/利用js写一个根据高度插入的瀑布流/
作者
Win
发布于
2020年11月21日
许可协议