ul版瀑布流

来源：互联网发布：ipad 传输软件编辑：程序博客网时间：2024/05/23 13:34

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<styletype="text/css">

.wrap{

width:800px;

border:1px solid mediumspringgreen;

margin:0 auto;

overflow:hidden;

}

.wrapul{

list-style:none;

width:200px;

padding:10px;

float:left;

box-sizing:border-box;

}

.wrapul li{

background-color: deeppink;

font-size:50px;

margin-bottom:10px;

}

</style>

</head>

<body>

<divclass="wrap">

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

<scripttype="text/javascript">

// 先取得所有的ul

varaUl = document.getElementsByTagName("ul");

// 定义一个随机函数,用于生成随机高度

functionrandH(min,max){

returnMath.floor(Math.random() * (max -min + 1) + min)

}

for(vari = 0; i < 20; i++){

// 生成li对象,并且给innerHTML赋值，随机生成高度，将oLi.style.height设置好

varoLi = document.createElement("li");

oLi.innerHTML = i;

oLi.style.height= randH(100, 300)+ "px";

// 怎么找到当前哪一列最矮，找到最矮的ul对象，把新生成的li，append给它

varminH = aUl[0].offsetHeight;

varminI = 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>

0 0