第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

在ie11上可以正常顯示,在chrome上不能,是怎么回事

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>瀑布流</title>

<style type="text/css">

? ? *{

? ? ?padding: 0;

? ? ?margin: 0;

? ? }

#main{

position: relative;

}

.box{

padding: 15px 0 0 15px;

float: left;

}

.img{

padding: 10px;

border: 1px solid gray;

border-radius: 10px;?

box-shadow: 0px 0px 5px #ccc;

}

.img img{

width: 120px;

height: auto;

}

</style>

</head>

<body>

<div id="main">

<div class="box">

<div class="img"><img src="img/1.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/2.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/3.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/4.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/5.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/6.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/7.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/8.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/9.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/10.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/11.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/12.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/13.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/14.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/15.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/16.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/17.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/18.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/19.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/20.jpg" alt=""></div>

</div>

<div class="box">

<div class="img"><img src="img/21.jpg" alt=""></div>

</div>

</div>

<script type="text/javascript">

var wrap=document.getElementById('main');

var boxImg=document.getElementsByClassName('box');


//圖片盒子的寬度

var boxImgWidth=boxImg[0].offsetWidth;


//網(wǎng)頁寬度

var clientWdith=document.documentElement.clientWidth;


//圖片列數(shù)

var imgCol=Math.floor(clientWdith/boxImgWidth);


wrap.style.width=boxImgWidth*imgCol+'px';

wrap.style.margin='0 auto';


//存放每一列的高度

var hArr=[];

for (let i = 0; i < boxImg.length; i++) {

if (i<imgCol) {

console.log(boxImg[i].offsetHeight);

hArr.push(boxImg[i].offsetHeight);

}else{

? ? ? ? //找出高度最低的box;

? ? ? ? var minH=Math.min.apply(null,hArr);

? ? ? ? var index=getMinIndex(minH,hArr);

? ? ? ? console.log(index,minH);

? ? ? ? boxImg[i].style.position='absolute';

? ? ? ? boxImg[i].style.left=index*boxImgWidth+'px';

? ? ? ? boxImg[i].style.top=minH+'px';

? ? ? ? hArr[index]+=boxImg[i].offsetHeight;

? ? ? ? }

}

? ? ? ? function getMinIndex(value,arr) {

? ? ? ? ?for (let i = arr.length - 1; i >= 0; i--) {

? ? ? ? ?if (arr[i]==value) {

? ? ? ? ?return i;

? ? ? ? ?}

? ? ? ? ?}

? ? ? ? }

</script>

</body>

</html>


正在回答

1 回答

瀏覽器的兼容問題

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消

在ie11上可以正常顯示,在chrome上不能,是怎么回事

我要回答 關(guān)注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號