显示图片的瀑布流(列数不固定)

来源：互联网发布：js动态生成商品表格编辑：程序博客网时间：2024/05/18 16:54

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8"/>

<scripttype="text/javascript"src="js/jquery-2.2.3.min.js">

</script>

<styletype="text/css">

margin:0;

padding:0;

}

#flow{

list-style:none;

margin:0 auto;

position:relative;

}

#flowli {

position:absolute;

width:200px;

/*border: 1px solid red;*/

transition:all 0.5s;

overflow:hidden;

}

#flowli img{

width:100%;

float:left;

}

</style>

</head>

<body>

<ulid="flow"></ul>

<scripttype="text/javascript">

$(function() {

//高度数组，保存每个li的高度

varhs = [];

varlis = [];

//布局函数

//当我bol为假时，更新的数组

//创建或者更新li

for(vari = 0; i< 39; i++) {

varli = $("<li></li>");

li.append("<img src='img/0"+ i + ".jpg'>");

lis.push(li);

}

functionreHeight(bol) {

varcols = parseInt($("body").width()/ 200);

console.log(cols);

$("#flow").css({

"width":cols * 200

});

vararrH = [];

for(vari = 0; i< cols; i++) {

arrH[i] = 0;

}

for(vari = 0; i< lis.length; i++) {

varminH = arrH[0];

varminI = 0;

for(vark = 0; k< arrH.length; k++) {

if(minH> arrH[k]) {

minH = arrH[k];

minI = k;

}

if(bol) {

$("#flow").append(lis[i]);

}

lis[i].css({

"left":minI * 200,

"top":arrH[minI]

})

arrH[minI] = arrH[minI] + lis[i].height();

}

window.onload= function() {

// $("body").scrollTop(0);

reHeight(true);

}

//第一次创建这些li

window.onresize= function() {

//更新

reHeight(false);

}

});

</script>

</body>

</html>

0 0