<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
margin: 0 15px;
box-sizing: border-box;
position: relative;
}
img {
width: 100%;
display: block;
}
.item {
width: 48.5%;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<div class="item"><img src="http://img0.imgtn.bdimg.com/it/u=3237972885,1285926145&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
<div class="item"><img src="http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg" alt=""></div>
</div>
<script>
var box = document.getElementById('box');
var items = box.children;
// 定义每一列之间的间隙 为10像素
var gap = 10;
window.onload = function() {
// 一进来就调用一次
waterFall();
// 封装成一个函数
function waterFall() {
// 1- 确定列数 = 页面的宽度 / 图片的宽度
var pageWidth = getClient().width;
// 图片的大小
var itemWidth = items[0].offsetWidth;
// 列数
var columns = parseInt(pageWidth / (itemWidth + gap));
var arr = [];
for (var i = 0; i < items.length; i++) {
if (i < columns) {
// 2- 确定第一行
items[i].style.top = 0;
items[i].style.left =(itemWidth + gap) * i + 'px';
arr.push(items[i].offsetHeight);
} else {
// 其他行
// 3- 找到数组中最小高度 和 它的索引
var minHeight = arr[0];
var index = 0;
for (var j = 0; j < arr.length; j++) {
if (minHeight > arr[j]) {
minHeight = arr[j];
index = j;
}
}
// 4- 设置下一行的第一个盒子位置
// top值就是最小列的高度 + gap
items[i].style.top = arr[index] + gap + 'px';
// left值就是最小列距离左边的距离
items[i].style.left =items[index].offsetLeft + 'px';
// 5- 修改最小列的高度
// 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
arr[index] = arr[index] + items[i].offsetHeight + gap;
}
}
}
// 页面尺寸改变时实时触发
window.onresize = function() {
waterFall();
};
// 当加载到第30张的时候
window.onscroll = function() {
if (getClient().height + getScrollTop() >= items[items.length - 1].offsetTop) {
// 模拟 ajax 获取数据
var datas = [
"http://img0.imgtn.bdimg.com/it/u=3237972885,1285926145&fm=26&gp=0.jpg",
"http://img4.imgtn.bdimg.com/it/u=1691184214,2639607274&fm=26&gp=0.jpg"
];
for (var i = 0; i < datas.length; i++) {
var div = document.createElement("div");
div.className = "item";
div.innerHTML = '<img src="' + datas[i] + '" alt="">';
box.appendChild(div);
}
waterFall();
}
};
};
// clientWidth 处理兼容性
function getClient() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
// scrollTop兼容性处理
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop;
}
</script>
</body>
</html>