瀑布流简单版式.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#u{
list-style: none;
margin: 0 auto;
position: relative;
top: 0;
left: 0;
}
#u>li{
position: absolute;
font-size: 50px;
background-color: black;
width: 200px;
border: 1px solid white;
color: white;
}
</style>
</head>
<body>
<ul id="u">
</ul>
<script type="text/javascript">
function randH(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
};
var oU = document.getElementById("u");
// 根据自己的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 n = 0;n < 20; n++) {
var li = document.createElement("li");
li.innerHTML = n;
li.style.height = randH(100,300) + "px";
// 求最短列 冒泡比法
var minH = arrH[0];
var index1 = 0;
for (var j = 0; j < arrH.length;j++) {
if (minH > arrH[j]) {
minH = arrH[j];
index1 = j;
}
}
// 定位li
// 定位li 的left
li.style.left = index1 * 200 + "px";
li.style.top = arrH[index1] + "px";
alert(index1);
oU.appendChild(li);
// 更新最短列高度数组
arrH[index1] += li.offsetHeight;
alert(arrH[index1]);
};
</script>
</body>
</html>
