HTML代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流布局</title>
<link rel="stylesheet" href="瀑布流布局.css">
</head>
<body>
<div id="bigbox">
<div class="box">
<div class="pic"><img src="image/img01.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img02.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img03.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img04.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img05.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img06.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img07.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img08.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img09.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img10.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img11.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img12.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img13.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img14.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img15.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img16.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img17.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img18.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img19.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img20.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img21.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img22.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img23.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img24.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img25.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img26.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img27.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img28.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img29.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img30.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img31.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img32.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img33.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img34.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img35.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img36.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img37.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img38.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img39.jpg" alt=""></div>
</div>
<div class="box">
<div class="pic"><img src="image/img40.jpg" alt=""></div>
</div>
</div>
</body>
<script src="瀑布流布局.js"></script>
</html>
CSS部分
* {
margin: 0;
padding: 0;
border: 0;
}
#bigbox {
margin: 0 auto;
position: relative;
/* width: 1440px; */
}
.box {
padding: 15px 0 0 15px;
float: left;
/* position: absolute; */
}
.pic {
padding: 10px;
border: 1px solid #ccc;
}
.pic img {
width: 165px;
}
img{
vertical-align: top;
}
JS部分
window.addEventListener('load',function(){
let bigBox = document.getElementById('bigbox')
waterFull("bigbox","box");
let timer = null;
window.onscroll = function(){
clearTimeout(timer)
timer = setTimeout(function(){
if(ifloadMore("bigbox","box")){
let dataArr = [ //实际开发过程中本阶段通过ajax从服务器拿到data数据
{"src": "img04.jpg"},
{"src": "img06.jpg"},
{"src": "img08.jpg"},
{"src": "img09.jpg"},
{"src": "img10.jpg"},
{"src": "img12.jpg"},
{"src": "img14.jpg"},
{"src": "img16.jpg"},
{"src": "img18.jpg"}
]
for(let i=0;i<dataArr.length;i++){
let newBox = document.createElement('div');
newBox.setAttribute('class','box');
bigBox.appendChild(newBox)
let newPic = document.createElement('div');
newPic.setAttribute('class','pic')
newBox.appendChild(newPic)
let newImg = document.createElement('img')
newImg.src = 'image/'+dataArr[i].src
newPic.appendChild(newImg)
}
setTimeout(waterFull("bigbox","box"),3000)
}
},2000)
}
let timer1 = null;
window.onresize = function(){
clearTimeout(timer1)
timer1 = setTimeout(function(){
waterFull("bigbox","box")
console.log(1)
},1000)
}
})
function waterFull (parent,child) {
let bigBox = document.getElementById(parent);
let smallBox = bigBox.getElementsByClassName(child);
let boxWidth = smallBox[0].offsetWidth;
let cliWidth = document.documentElement.clientWidth;
let cols = parseInt(cliWidth/boxWidth)
bigBox.style.width = cols*boxWidth +'px';
let heightArr = [];
for(let i=0;i<smallBox.length;i++){
boxHeight = smallBox[i].offsetHeight;
if(i<cols){
heightArr.push(boxHeight);
smallBox[i].style = ''
}else{
minBoxHeight = Math.min(...heightArr);
minBoxIndex = getMinBoxIndex(heightArr,minBoxHeight);
smallBox[i].style.position = 'absolute';
smallBox[i].style.left = minBoxIndex*boxWidth+ 'px'
smallBox[i].style.top = minBoxHeight + 'px'
heightArr[minBoxIndex] += boxHeight
}
}
}
function ifloadMore (parent,child){
let bigBox = document.getElementById(parent);
let smallBoxs = bigBox.getElementsByClassName(child);
let lastBox = smallBoxs[smallBoxs.length-1];
let lastBoxDis = lastBox.offsetHeight*0.5 + lastBox.offsetTop;
let cliHeight = document.documentElement.clientHeight;
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return (scrollTop+cliHeight) >= lastBoxDis
}
function getMinBoxIndex (arr,val){
for(let i=0;i<arr.length;i++){
if(arr[i]==val){
return i
}
}
}
