<!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;
}
img{
width: 100%;
height: 100%;
}
</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 leftSpace = 10;
// 间距
var KongXi = 10;
// 初始化列高数组
var arrH = [];
for (var i = 0; i < cols; i++) {
arrH[i] = 10;
}
// 用for循坏生成50个小块
for (var j = 0; j < 50; j++) {
var li = document.createElement("li");
li.innerHTML = "<img src='img/a"+ (j+1) + ".jpg'/>";
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 = leftSpace + minI * (200 + KongXi) + "px";
li.style.top = arrH[minI] + "px";
// 添加这个li
flow.appendChild(li);
// 更新最短列高度数组
arrH[minI] = arrH[minI] + li.offsetHeight + KongXi;
}
</script>
</body>
</html>
扫一扫
2938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
