<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#flow{
list-style: none;
margin: 0 auto;
position: relative;
}
#flow li{
position: absolute;
font-size: 50px;
background-color: yellow;
width: 200px;
border: 1px solid cyan;
color: deeppink;
}
</style>
</head>
<body>
<ul id="flow">
<!--<li></li>-->
</ul>
<script type="text/javascript">
// 定义一个随机函数，用于生成随机的高度
function randH(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
var flow = document.getElementById("flow");
//根据自己的documentElement.clientWidth计算出来你有多少列
var cols = parseInt(document.documentElement.clientWidth / 200);
// 初始化列高数组
var arrH = [];
for(var i = 0; i < cols; i++){
arrH[i] = 0;
}
// 用for循坏生成20个小块
for (var j = 0; j < 20; j++) {
var li = document.createElement("li");
li.innerHTML = j;
li.style.height = randH(100, 300) + "px";
// 求最短列
var minH = arrH[0];
var minI = 0;
for (var k = 0; k < arrH.length; k++) {
if (minH > arrH[k]) {
minH = arrH[k];
minI = k;
}
}
// 定位li
// 定位li的left
li.style.left = minI * 200 + "px";
li.style.top = arrH[minI] + "px";
// alert(minI);
// 添加这个li
flow.appendChild(li);
// 更新最短列高度数组
arrH[minI] = arrH[minI] + li.offsetHeight;
// alert(arrH[minI]);
}
</script>
</body>
</html>
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
