<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{position: relative;}
#box{margin: 0 auto;}
img{ 200px;display:block;box-shadow: 2px 2px 2px #999999;position: absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
let box = document.getElementById('box');
let aimg = box.children;
let pageW = document.body.offsetWidth;
let imgW = aimg[0].offsetWidth;
let col = parseInt(pageW/imgW);
let imgML = 8;
function waterFall(){
aimg = box.children;
let lineH =[];
Array.from(aimg).forEach((img,key)=>{
if(key < col){
img.style.left = (imgW + imgML)*key +'px';
lineH.push(img.offsetHeight)
}else{
let minHeight = lineH[0];
let minIndex = 0;
lineH.forEach((v,k)=>{
if(minHeight > v){
minHeight = v;
minIndex = k
}
})
img.style.left = aimg[minIndex].offsetLeft +'px';
img.style.top = minHeight + 'px';
lineH[minIndex]= minHeight + img.offsetHeight
}
})
}
waterFall()
window.onscroll = function(){
let cliH = clientObj.getHeight() +stObj.getTop();
let countH = aimg[aimg.length -1].offsetTop;
var imgDatas = [
'./si/1.jpg','./si/2.jpg','./si/3.jpg','./si/4.jpg',
'./si/5.jpg','./si/6.jpg','./si/7.jpg','./si/8.jpg',
'./si/9.jpg','./si/10.jpg','./si/11.jpg','./si/12.jpg',
'./si/16.jpg','./si/15.jpg','./si/14.jpg','./si/13.jpg',
'./si/17.jpg','./si/18.jpg','./si/6.jpg','./si/9.jpg',
'./si/13.jpg','./si/10.jpg'
];
if(countH < cliH){
let imgStr = '';
imgDatas.forEach((v)=>{
imgStr += `<img src =${v}></img>`
})
box.innerHTML += imgStr
waterFall();
}
}
}
//获取窗口的宽度和高度
var clientObj = {
getHeight(){
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
},
getWidth(){
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
}
// 获取滚动条的高度
var stObj = {
getTop() {
return window.pageYOffset || document.body.scrollTop
}
}
</script>
</head>
<body>
<div id="box">
<img src="./si/1.jpg" >
<img src="./si/2.jpg" >
<img src="./si/3.jpg" >
<img src="./si/4.jpg" >
<img src="./si/5.jpg" >
<img src="./si/6.jpg" >
<img src="./si/7.jpg" >
<img src="./si/8.jpg" >
<img src="./si/9.jpg" >
<img src="./si/10.jpg" >
<img src="./si/11.jpg" >
<img src="./si/12.jpg" >
<img src="./si/13.jpg" >
<img src="./si/14.jpg" >
<img src="./si/15.jpg" >
<img src="./si/16.jpg" >
<img src="./si/17.jpg" >
<img src="./si/18.jpg" >
<img src="./si/1.jpg" >
<img src="./si/2.jpg" >
<img src="./si/3.jpg" >
<img src="./si/4.jpg" >
<img src="./si/5.jpg" >
<img src="./si/6.jpg" >
<img src="./si/7.jpg" >
<img src="./si/8.jpg" >
<img src="./si/9.jpg" >
<img src="./si/10.jpg" >
<img src="./si/11.jpg" >
<img src="./si/12.jpg" >
<img src="./si/13.jpg" >
<img src="./si/14.jpg" >
<img src="./si/15.jpg" >
<img src="./si/16.jpg" >
<img src="./si/17.jpg" >
<img src="./si/18.jpg" >
</div>
</body>
</html>