重点讲解 都在注释里
基本原理:将每张图片都定位到 每一列中 高度最小的 那一列的 后面,每当滚动页面的时候 就 加载一张图片,然后给图片定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #ccc;
}
.container{
width: 700px;
height: auto;
margin: 0 auto;
position: relative;
}
.box{
width:200px;
float: left;
}
.box .box_img img{
width: 95%;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="box">
<div class="box_img"><img src="./img/12.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/2.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/3.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/4.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/5.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/6.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/7.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/8.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/9.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/10.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/11.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/12.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/13.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/12.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/13.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/12.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/13.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/12.jpg"></div>
</div>
<div class="box">
<div class="box_img"><img src="./img/13.jpg"></div>
</div>
</div>
<script>
window.onload = function () {
var imgArr = [{src:"./img/1.jpg"},{src:"./img/2.jpg"},{src:"./img/3.jpg"},{src:"./img/4.jpg"},{src:"./img/5.jpg"},{src:"./img/6.jpg"},{src:"./img/7.jpg"},{src:"./img/8.jpg"},{src:"./img/9.jpg"},{src:"./img/10.jpg"},]
waterFall();
function waterFall() {
var container = document.getElementById('container');
var boxArr = container.getElementsByClassName('box');
var colWidth = container.getElementsByClassName('box')[0].offsetWidth;
var col = Math.floor(container.offsetWidth / colWidth);
var colHeight = [];
for(let i=0;i<boxArr.length;i++){
if(i<col){
colHeight.push(boxArr[i].offsetHeight);
}else{
var min = Math.min.apply(Math,colHeight);
var minIndex = findMinIndex(colHeight,min);
boxArr[i].style.position = 'absolute';
boxArr[i].style.top = min + 'px';
boxArr[i].style.left = colWidth * minIndex +'px';
colHeight[minIndex] += boxArr[i].offsetHeight;
}
}
}
window.onscroll = function () {
var bodyHeight = document.documentElement.offsetHeight;
var clientHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollH = document.body.scrollHeight;
if(scrollTop+clientHeight >= (scrollH-50)){
console.log(scrollTop+clientHeight +'|||||'+ (scrollH-50));
var imgIndex = Math.floor(Math.random() * imgArr.length);
console.log(imgIndex)
var box = document.createElement('div');
var box_img = document.createElement('div');
box.className = 'box';
box_img.className = 'box_img';
container.append(box);
box.append(box_img);
var img = document.createElement('img');
img.src = imgArr[imgIndex].src;
box_img.append(img)
}
waterFall()
}
function findMinIndex(arr,min){
var index ;
for(var i=0,length=arr.length;i<length;i++){
if(arr[i] == min){
return i;
}
}
}
}
</script>
</body>
</html>