瀑布流为什么在ie上正常显示，chrome有时会重叠，有时又正常？

首页课程实战体系课手记专栏慕课教程

瀑布流为什么在ie上正常显示，chrome有时会重叠，有时又正常？

<!DOCTYPE html>

<html>

<head>

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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

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

var dataInt={

"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"}]

};

//滑动鼠标加载

window.onscroll=function(){

if (isScrollSlider()) {

for (var i = dataInt.data.length - 1; i >= 0; i--) {

var boxImg=document.createElement('div');

boxImg.className='box';

wrap.appendChild(boxImg);

boxImg.innerHTML='<div class="img"><img src="img/'+dataInt.data[i]['src']+'" alt=""></div>';

}

waterfull();

}else{

return

}

isScrollSlider();

};

function isScrollSlider(){

var lastImgBox=boxImg[boxImg.length-1];

var latBoxH=lastImgBox.offsetTop+lastImgBox.offsetHeight;//最后一个图片中间距顶点位置

var scrollHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;

return latBoxH-scrollHeight;

};

function waterfull(){

//图片盒子的宽度

var boxImgWidth=boxImg[0].offsetWidth;

//网页宽度

var clientWdith=document.documentElement.clientWidth;

//图片列数

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) {

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

}else{

//找出高度最低的box;

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

var index=getMinIndex(minH,hArr);

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;

}

};

waterfull();

</script>

</body>

</html>

想取的名字都被占了

浏览 963回答 1

1回答

pardon110

你写的代码兼容性差，不同浏览器厂商对同一份代码会有差异。

0 0

随时随地看视频慕课网APP