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?=?[?????//實際開發(fā)過程中本階段通過ajax從服務器拿到data數(shù)據(jù)
????????????????????{"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
????????}
????}
}
