<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap {
width: 800px;
border: 1px solid black;
margin: 0;
overflow: hidden;
padding: 0;
}
.wrap ul {
list-style: none;
width: 200px;
/*padding: 10px;*/
box-sizing: border-box;
float: left;
margin: 0;
padding: 0;
}
.wrap ul li {
/*background-color: red;*/
width: 200px;
box-sizing: border-box;
/*font-size: 50px;*/
margin-bottom: -4px;
}
.wrap ul li img {
width: 200px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<!--<li>1</li>-->
</ul>
<ul>
<!--<li>2</li>-->
</ul>
<ul>
<!--<li>3</li>-->
</ul>
<ul>
<!--<li>4</li>-->
</ul>
</div>
<script>
var pictures = [
"1.jpg",
"10.jpg",
"11.jpg",
"12.jpg",
"13.jpg",
"14.jpg",
"15.jpg",
"16.jpg",
"17.jpg",
"18.jpg",
"19.jpg",
"2.jpg",
"20.jpg",
"21.jpg",
"22.jpg",
"23.jpg",
"24.jpg",
"25.jpg",
"26.jpg",
"27.jpg",
"28.jpg",
"29.jpg",
"3.jpg",
"30.jpg",
"31.jpg",
"32.jpg",
"33.jpg",
"34.jpg",
"4.jpg",
"5.jpg",
"6.jpg",
"7.jpg",
"8.jpg",
"9.jpg"
];
//先取得ul数组
var uls = document.getElementsByTagName("ul");
// //定义一个随机函数，用于生成随机的高
// function randH(min, max) {
// return parseInt(Math.random() * (max - min + 1)) + min;
// }
var img;
for (var i = 0; i < 20; i++) {
//生成一个li对象
var li = document.createElement("li");
img = document.createElement('img')
img.src = "img/" + pictures[i];
li.appendChild(img);
//li.innerHTML = i;
//li.style.height = randH(100, 300) + "px";
//怎么找到当前哪一列最矮，找到最矮的ul对象，把新生成的li，append给它
var minH = uls[0].offsetHeight;
var minI = 0;
for (var j = 0; j < uls.length; j++) {
if (minH > uls[j].offsetHeight) {
//保存最小高度，保存最小的高度对应的ul列下标用minI
minH = uls[j].offsetHeight;
minI = j;
}
}
uls[minI].appendChild(li);
}
</script>
</body>
</html>
扫一扫
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
