先聲明一個(gè)數(shù)組，再創(chuàng)建img，再放進(jìn)數(shù)組里，不讓它被回收，當(dāng)設(shè)置src時(shí)，就會(huì)發(fā)出請(qǐng)求，下載圖片的路徑，把所有的圖片的路徑都下載好后，再執(zhí)行,因?yàn)橐呀?jīng)提前請(qǐng)求了路徑了，在同一個(gè)頁(yè)面，請(qǐng)求過(guò)一次后，下面再用相同路徑圖片的時(shí)候就不用再請(qǐng)求了，可以瞬間加載好所有已經(jīng)預(yù)加載的圖片了
<!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')等價(jià)
var readyImg = new Image();
//把聲明的對(duì)象存到數(shù)組里，垃圾回收機(jī)制就不會(huì)回收?qǐng)D片；
imgArr.push(readyImg);
//圖片是在設(shè)置完src后就開(kāi)市加載圖片
readyImg.src = "img/P_0" + j + ".jpg”;
//onload方法綁定的是readImage指的對(duì)象----16張圖片
eadyImg.onload = function(){
count++;
progress.value = (count / 16) * 100;
if(count == 16){
start();
//在這個(gè)位置寫onresize方法是為了在圖片沒(méi)預(yù)加載好之前拖動(dòng)窗口時(shí)不會(huì)加載圖 片
window.onresize=function(){
start();
}
}
}
}
var isFirst=true;
function start(){
var l=parseInt((window.innerWidth-16)/210);
//如果窗口寬度發(fā)生變化，但是獵術(shù)沒(méi)有變，就不能重新布局
if(heightArr.length==l&&l!=0){
return;
}
//如果窗口列數(shù)不足1列，也要保證heightArr的長(zhǎng)度為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);
}
//在第一次調(diào)用完start后關(guān)掉開(kāi)關(guān)，不再創(chuàng)建img
isFirst=false;
}
</script>
</html>
