上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/font_2759667_f8uizjlshgd/iconfont.css"/>
<title>瀑布流</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.div1{
width: 800px;
overflow: hidden;
margin: 0 auto;
}
ul{
width: 200px;
float: left;
overflow: hidden;
}
li{
width: 190px;
margin: 5px;
color: white;
font-size: 3em;
text-align: center;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script type="text/javascript">
var uls=document.getElementsByTagName("ul");
//创建50个li标签
for(var i=0;i<50;i++){
// 1.创建标签
var li=document.createElement("li")
// 2.配置li标签
li.innerHTML=i+1;
var h=rand(50,300)
li.style.height = h+"px";
li.style.lineHeight=h+"px";
// 3.添加到对应的ul中
uls[getMin()].appendChild(li);
}
//返回高度最矮的ul的下标
function getMin(){
var min=0;
for(var i=1;i<uls.length;i++){
if(uls[min].offsetHeight>uls[i].offsetHeight){
min=i;
}
}
return min;
}
//随机函数
function rand(min, max ){
return Math.round(Math.random()*(max-min)+min);
}
</script>
</html>
运行结果