ul版瀑布流加图片

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

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

}

.wrap{

width:800px;

border:1px solid black;

margin:0;

overflow:hidden;

padding:0;

}

.wrapul {

list-style:none;

width:200px;

/*padding: 10px;*/

box-sizing:border-box;

float:left;

margin:0;

padding:0;

}

.wrapul li{

/*background-color: red;*/

width:200px;

box-sizing:border-box;

/*font-size: 50px;*/

margin-bottom:-4px;

}

.wrapul li img{

width:200px;

}

</style>

</head>

<body>

<divclass="wrap">

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

varpictures = [

"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数组

varuls = document.getElementsByTagName("ul");

// //定义一个随机函数，用于生成随机的高

// function randH(min, max) {

// return parseInt(Math.random() * (max - min + 1)) + min;

// }

varimg;

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

//生成一个li对象

varli = 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给它

varminH = uls[0].offsetHeight;

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

0 0