<!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;
}
.itemBox {
width: 1050px;
margin: 0 auto;
position: relative;
}
.item {
border: 1px solid #ccc;
padding: 4px;
position: absolute;
}
</style>
</head>
<body>
<div class="itemBox">
<div class="item">
<img src="./images/P_000.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_001.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_002.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_003.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_004.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_005.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_006.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_007.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_008.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_009.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_000.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_001.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_002.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_003.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_004.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_005.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_006.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_007.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_008.jpg" alt="">
</div>
<div class="item">
<img src="./images/P_009.jpg" alt="">
</div>
</div>
<script>
window.onload = function () {
// 获取相关元素
var itemBox = document.getElementsByClassName('itemBox')[0];
var items = document.getElementsByClassName('item');
// 1.获取大容器itemBox的宽度
var itemBoxW = itemBox.offsetWidth;
// 2.获取图片容器item的宽度
var itemW = items[0].offsetWidth;
// 3.求出列数
var column = parseInt(itemBoxW / itemW);
// 4.求出间距
var distence = (itemBoxW - itemW * column) / (column - 1);
var arr = []; //定义数组，用来存放每列的高度
// 5.实现瀑布流布局的方法
waterFull();
function waterFull() {
for (var i = 0; i < items.length; i++) {
// 如果在第一行,top值都是0,只需确定left值就可以了， // 每个item的left值 = (item的宽度 + 间距) * 对应的索引，将每个item的高度存入数组
// 如果不在第一行，left值是数组中最小值的索引所对应的列，left值 = (itemW + distence) * 最小值索引； top = 数组中最小值 + 间距。并将最小值重新赋值到数组
if (i < column) {
items[i].style.left = (itemW + distence) * i + 'px';
arr[i] = items[i].offsetHeight;
} else {
var minV = getMin(arr).minV; //数组中最小的值；
var minI = getMin(arr).minI; //数组中最小值对应的索引
items[i].style.left = (itemW + distence) * minI + 'px';
items[i].style.top = minV + distence + 'px';
// 重新将高度存入数组
arr[minI] = minV + distence + items[i].offsetHeight;
}
}
}
// 获取数组中最小值
function getMin(arr) {
var obj = {};
// 假设最小值是第一个
obj.minV = arr[0];
obj.minI = 0;
for (var i = 1; i < arr.length; i++) { //这里i = 1，因为已经假设第一个最小
if (obj.minV > arr[i]) {
obj.minV = arr[i];
obj.minI = i;
}
}
return obj;
}
// 6.滚动页面时加载数据
window.onscroll = function () {
// console.log(document.body.scrollTop);
// console.log(document.documentElement.scrollTop);
// console.log(window.innerHeight);
// console.log(getMin(arr).minV);
//pageYOffset 只读属性 返回文档在窗口垂直方向滚动的像素。 IE8不兼容
// 判断如果 页面滚动出去的距离 + 可视窗口的高度 > 数组中最小高度
if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
var json = [
{ "src": "./images/P_000.jpg" },
{ "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" },
{ "src": "./images/P_010.jpg" }
]
for (var i = 0; i < json.length; i++) {
var div = document.createElement('div');
div.className = 'item';
itemBox.appendChild(div);
var img = document.createElement('img');
img.src = json[i].src;
div.appendChild(img);
}
waterFull();
}
}
}
</script>
</body>
</html>
网友评论