先聲明一個數組，再創建img，再放進數組里，不讓它被回收，當設置src時，就會發出請求，下載圖片的路徑，把所有的圖片的路徑都下載好后，再執行,因為已經提前請求了路徑了，在同一個頁面，請求過一次后，下面再用相同路徑圖片的時候就不用再請求了，可以瞬間加載好所有已經預加載的圖片了
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>圖片版瀑布流</title>
<style type="text/css">
.box{
width: 100%;
border: 1px purple solid;
position: relative;
margin: 0 auto;
/min-width: 200px;/
}
.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;
ar arr = ["wk1.png", "bg.png", "cold.png", "wm.png"]
var imgArr = [];
for(var j = 0; j < 16; j++){
//new Image和document.createElement('img')等價
var readyImg = new Image();
//把聲明的對象存到數組里，垃圾回收機制就不會回收圖片；
imgArr.push(readyImg);
//圖片是在設置完src后就開市加載圖片
readyImg.src = "img/P_0" + j + ".jpg”;
//onload方法綁定的是readImage指的對象----16張圖片
eadyImg.onload = function(){
count++;
progress.value = (count / 16) * 100;
if(count == 16){
start();
//在這個位置寫onresize方法是為了在圖片沒預加載好之前拖動窗口時不會加載圖 片
window.onresize=function(){
start();
}
}
}
}
var isFirst=true;
function start(){
var l=parseInt((window.innerWidth-16)/210);
//如果窗口寬度發生變化，但是獵術沒有變，就不能重新布局
if(heightArr.length==l&&l!=0){
return;
}
//如果窗口列數不足1列，也要保證heightArr的長度為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);
}
//在第一次調用完start后關掉開關，不再創建img
isFirst=false;
}
</script>
</html>
