预加载实现瀑布流布局--纵向-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 1000px;
}
img{
position: absolute;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
let box=document.querySelector('div'),//容器
baseWidth=200,//基宽;
imglist=[],//图片中转站;
pages=80,//图片数目;
columns=5//列数;
for(let i=1;i<pages+1;i++){
init(i)
}
function init(i){
let img=new Image();
img.src='./images/pic ('+i+').jpg';
img.=function(){
//添加缩放比例
Object.defineProperty(img,'scale',{
value:img.width/img.height
})
imglist.push(img);
if(imglist.length==pages){
//图片信息全部加载完成
console.log('over!')
formate();
}
}
}
function formate(){
let rows=pages/5;
for(let i=0;i<rows;i++){
for(let j=0;j<5;j++){
let index=i*5+j;//当前坐标
imglist[index].style.width='200px';
imglist[index].style.height=200/imglist[index].scale+'px';
imglist[index].style.left=j*220+'px';//基于当前宽度+20(列间隔)
if(i!=0){//Int转换为整数 20为行间隔 h t当前图片的上方的height top 
let t=Int(imglist[(i-1)*5+j].style.top),
h=Int(imglist[(i-1)*5+j].style.height);
imglist[i*5+j].style.top=t+h+20+'px';
}else
imglist[i*5+j].style.top='0px';
box.appendChild(imglist[i*5+j])//放入容器
}
}
}
function Int(str){
return Number(str.replace('px',''))
}
</script>
</body>
</html>
Emm......