<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.wrap{
width: 800px;
border: 1px solid mediumspringgreen;
margin: 0 auto;
overflow: hidden;
}
.wrap ul{
list-style: none;
width: 200px;
padding: 10px;
float: left;
box-sizing: border-box;
}
.wrap ul li{
background-color: deeppink;
font-size: 50px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<!--<li>1</li>-->
<!--<li>6</li>-->
</ul>
<ul>
<!--<li>2</li>-->
</ul>
<ul>
<!--<li>3</li>-->
</ul>
<ul>
<!--<li>4</li>-->
</ul>
</div>
<script type="text/javascript">
// 先取得所有的ul
var aUl = document.getElementsByTagName("ul");
// 定义一个随机函数,用于生成随机高度
function randH(min, max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
for(var i = 0; i < 20; i++){
// 生成li对象,并且给innerHTML赋值，随机生成高度，将oLi.style.height设置好
var oLi = document.createElement("li");
oLi.innerHTML = i;
oLi.style.height = randH(100, 300) + "px";
// 怎么找到当前哪一列最矮，找到最矮的ul对象，把新生成的li，append给它
var minH = aUl[0].offsetHeight;
var minI = 0;
// 保存最小高度，保存最小高度对应的ul列下标用minI
for (var j = 0; j < aUl.length; j++) {
if (minH > aUl[j].offsetHeight) {
minH = aUl[j].offsetHeight;
minI = j;
}
}
// 找到最小列后，将生成的oLi append给对应的ul
aUl[minI].appendChild(oLi);
}
</script>
</body>
</html>
扫一扫
629
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
