<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>图片版瀑布流</title>
<style type="text/css">
.box{
width: 850px;
border: 1px purple solid;
position: relative;
margin:0 auto;
min-width: 220px;
}
.box img{
width: 200px;
position: absolute;
transition:0.5s;
}
</style>
</head>
<body>
<div>
<!-- 进度条 -->
<progress min="0" max="100" value="0" id="progress" ></progress>
</div>
<div class="box">
</div>
</body>
<script type="text/javascript">
var progress = document.getElementById("progress");
var box = document.getElementsByClassName('box')[0];
var heightArr = [];
var count = 0;
var arr = ["wk1.png", "bg.png", "cold.png", "wm.png"]
var imgArr = [];
for(var j = 0; j < 16; j++){
var readyImg = new Image();
imgArr.push(readyImg);
readyImg.src = "imgs/P_0" + j + ".jpg";
readyImg.onload = function(){
count++;
progress.value = (count / 16) * 100;
if(count == 16){
start();
// 把改变窗口方法放在预加载里，否则当图片加载时拖动窗口图片会一张一张显示
re();
}
}
}
// 加一个开关让过渡有效果,否则再次调用start方法时，会把img再次插入，transtion不会有用
var isFirst = true;
function start(){
// ****************************************
// onresize里面的方法放上来为了让刷新页面的时候也会发生变化
var l = parseInt((window.innerWidth - 16)/200);
// 当窗口移动的范围很小时，还是当前列数时，不用重新布局，直接return
// 当l为0时heightArr.length为0，刷新页面下面不会执行，所以会堆叠在一起
if(heightArr.length ==l && l !=0){
return;
}
console.log("重新布局");
//如果窗口列数不足一列，也要保证heightArr.length的长度为1
//当l为0时，heightArr.length为1；(至少放一列)
heightArr.length = l == 0 ? 1 : l;
box.style.width = 210 * l + "px";
for(var i=0; i <heightArr.length; i++){
heightArr[i] = 0;
}
// **********************************************
// 比较每列数组的长度，将生成的图片插入长度最小的数组
for(var i = 0; i < 16; i++){
var img = imgArr[i]
var minIndex = 0;
for(var j = 1; j < heightArr.length; j++){
if (heightArr[minIndex] > heightArr[j]) {
minIndex = j;
}
}
img.style.left = minIndex * 210 + "px";
img.style.top = heightArr[minIndex] + "px";
if(isFirst){
box.appendChild(img);
}
heightArr[minIndex] += (img.offsetHeight + 10);
}
isFirst = false;
}
// 改变窗口大小，让整个box的宽度
function re(){
window.onresize = function(){
start();
}
}
</script>
</html>
网友评论