您的位置：首页 > 其它

ul版瀑布流

2016-07-13 08:30 106 查看

<!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>


</ul>
<ul>

</ul>
<ul>

</ul>
<ul>

</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 瀑布流 ul

相关文章推荐

新的分享

章节导航