<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
border: 1px solid #ccc;
padding: 5px;
float: left;
/* position: absolute; */
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="box"><img src="./images/P_001.jpg" alt=""></div>
<div class="box"><img src="./images/P_002.jpg" alt=""></div>
<div class="box"><img src="./images/P_003.jpg" alt=""></div>
<div class="box"><img src="./images/P_004.jpg" alt=""></div>
<div class="box"><img src="./images/P_005.jpg" alt=""></div>
<div class="box"><img src="./images/P_006.jpg" alt=""></div>
<div class="box"><img src="./images/P_007.jpg" alt=""></div>
<div class="box"><img src="./images/P_008.jpg" alt=""></div>
<div class="box"><img src="./images/P_009.jpg" alt=""></div>
<div class="box"><img src="./images/P_010.jpg" alt=""></div>
<div class="box"><img src="./images/P_011.jpg" alt=""></div>
<div class="box"><img src="./images/P_012.jpg" alt=""></div>
<div class="box"><img src="./images/P_013.jpg" alt=""></div>
<div class="box"><img src="./images/P_014.jpg" alt=""></div>
<div class="box"><img src="./images/P_015.jpg" alt=""></div>
<div class="box"><img src="./images/P_016.jpg" alt=""></div>
<div class="box"><img src="./images/P_017.jpg" alt=""></div>
<div class="box"><img src="./images/P_018.jpg" alt=""></div>
<div class="box"><img src="./images/P_019.jpg" alt=""></div>
<div class="box"><img src="./images/P_020.jpg" alt=""></div>
<div class="box"><img src="./images/P_013.jpg" alt=""></div>
<div class="box"><img src="./images/P_014.jpg" alt=""></div>
<div class="box"><img src="./images/P_015.jpg" alt=""></div>
<div class="box"><img src="./images/P_016.jpg" alt=""></div>
<div class="box"><img src="./images/P_017.jpg" alt=""></div>
<div class="box"><img src="./images/P_018.jpg" alt=""></div>
<div class="box"><img src="./images/P_019.jpg" alt=""></div>
<div class="box"><img src="./images/P_020.jpg" alt=""></div>
<div class="box"><img src="./images/P_013.jpg" alt=""></div>
<div class="box"><img src="./images/P_014.jpg" alt=""></div>
<div class="box"><img src="./images/P_015.jpg" alt=""></div>
<div class="box"><img src="./images/P_016.jpg" alt=""></div>
<div class="box"><img src="./images/P_017.jpg" alt=""></div>
<div class="box"><img src="./images/P_018.jpg" alt=""></div>
<div class="box"><img src="./images/P_019.jpg" alt=""></div>
<div class="box"><img src="./images/P_020.jpg" alt=""></div>
</div>
<script src="water.js"></script>
</body>
</html>
//获取标签图片
var container = document.getElementById('container');
var box = container.children;
//判断可视区域能显示多少列
//获取可视窗口宽度
var winWidth = window.innerWidth;
// 获取box宽度 因为都一样宽 所有随便选一个就可以获取
var boxWidth = box[35].offsetWidth;
// 计算能够显示多少列
var column = parseInt(winWidth / boxWidth);
//定义一个空数组用来存每列box的高度
var boxHeight = [];
//遍历box
function waterFull() {
for (var i = 0; i < box.length; i++) {
//判断是否是地一行
if (i < column) {
//是， 把这一行的高度添加到数组中,每个代表这一列的高度
boxHeight[i] = box[i].offsetHeight
} else {
//第二行及以后
// 把他放到缺口中（上一行高度最小的）
//先找到上一行最矮的高度,下标和距左面距离
//最矮的
var minBoxHeight = Math.min.apply(null, boxHeight);
// 他的下标
var minBoxIndex = boxHeight.indexOf(minBoxHeight)
//他距离左面的距离
var minBoxLeft = box[minBoxIndex].offsetLeft;
// 把下一行的位置放到这里
box[i].style.position = 'absolute';
box[i].style.top = minBoxHeight + 'px';
box[i].style.left = minBoxLeft + 'px';
//更新数组
//把最小的列的高度更新
boxHeight[minBoxIndex] = minBoxHeight + box[i].offsetHeight;
}
}
}
waterFull();
window.onscroll = function () {
//当最后一个box进入可视窗口时添加新的box以免出现空白
//获取浏览器可视窗口高度
var winHeight = window.innerHeight;
// 浏览器头部卷去高度
var scrollTop = window.pageYOffset;
// 最后一个box距离页面顶端距离
var endBoxTop = box[box.length - 1].offsetTop;
//判断最后一个box是否进入可视窗口
if (winHeight + scrollTop >= endBoxTop) {
//最后一张出现,动态追加box
json.forEach(element => {
var newDiv = document.createElement('div');
var newImg = document.createElement('img');
newImg.src = element.src;
newDiv.className = 'box';
container.appendChild(newDiv);
newDiv.appendChild(newImg);
waterFull();
});
}
}
var json = [{ "src": "./images/P_001.jpg" },
{ "src": "./images/P_002.jpg" },
{ "src": "./images/P_003.jpg" },
{ "src": "./images/P_004.jpg" },
{ "src": "./images/P_005.jpg" },
{ "src": "./images/P_006.jpg" },
{ "src": "./images/P_007.jpg" },
{ "src": "./images/P_008.jpg" },
{ "src": "./images/P_009.jpg" }
]
