預(yù)加載實(shí)現(xiàn)瀑布流布局--縱向
<!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......
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦