<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
.wrap{width: 600px;
margin:0 auto;
padding:20px 10px;
border:1px solid #999;
overflow: hidden;}
.wrap ul{
float:left;
width: 200px;
list-style: none;
padding:0 10px;
/*怪異和模型*/
box-sizing:border-box;
}
.wrap ul li{
background-color: #ccc;
margin-bottom: 20px;
font-size: 10px;
}
</style>
</head>
<body>
<div class="wrap"id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
<script>
//總函數(shù)
function flowFn(){
//獲取元素
var wrap=document.getElementById('wrap');
var list=document.getElementsByTagName('ul');
//設(shè)置一個(gè)隨機(jī)函數(shù)
function randFn(max,min){
var rand=parseInt(Math.random()*(max-min)+min);
return rand;
}
//創(chuàng)建li元素 函數(shù)
function createLi(){
//創(chuàng)建10li
for(var i=0;i<10;i++){
var li=document.createElement('li');
//為li文本內(nèi)容
// li.innerHTML=i;
// 隨機(jī)獲得一個(gè)高度
var height=randFn(100,300);
//將隨機(jī)的高賦值給li
li.style.height=height+"px";
//創(chuàng)建一個(gè)數(shù)組
var heightArr=[];
//獲取最小高度下標(biāo)
var minIndex=0;
//循環(huán)獲取元素高度
for(var j=0;j<list.length;j++){
//獲取list數(shù)組中每個(gè)元素的高度,并放入空的數(shù)組中
heightArr.push(list[j].offsetHeight)
// 假定數(shù)組0下標(biāo)的值最小
var minHeight=heightArr[0];
//
if(minHeight>heightArr[j]){
//將最小值給minHeight
minHeight=heightArr[j];
//獲取到最小的高度下標(biāo)
minIndex=j;
}
}
//將li優(yōu)先添加到高度最小的ul中,目的就是使高度均衡
list[minIndex].appendChild(li);
}
}
createLi();
}
flowFn();
</script>
</html>
Paste_Image.png
