分享一个用原生JS实现的瀑布流布局，效果如下：
实现代码如下，欢迎大家复制粘贴。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>原生JS实现瀑布流布局</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#list {
position: relative;
}
.item {
padding: 15px 0 0 15px;
float: left;
}
.box {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img {
width: 162px;
height: auto;
}
</style>
</head>
<body>
<div id="list">
<div class="item">
<div class="box">
<img src="./images/1.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/2.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/3.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/4.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/5.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/6.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/7.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/8.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/9.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/10.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/11.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/12.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/13.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/14.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/15.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/16.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/17.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/18.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/19.jpg" />
</div>
</div>
<div class="item">
<div class="box">
<img src="./images/20.jpg" />
</div>
</div>
</div>
<script>
window.onload = function () {
// 调用函数
waterfall('list', 'item');
// 模拟数据
var data = [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }];
// 滚动加载
window.onscroll = function () {
// 判断是否具备加载剩余图片
if (checkLoadImage()) {
// 获取容器
var list = document.getElementById('list');
// 遍历数据
for (var i = 0; i < data.length; i++) {
var item = document.createElement('div');
item.className = 'item';
list.appendChild(item);
var box = document.createElement('div');
box.className = 'box';
item.appendChild(box);
var img = document.createElement('img');
img.src = './images/' + data[i].src;
box.appendChild(img);
};
// 调用瀑布流功能函数
waterfall('list', 'item');
};
}
};
// 瀑布流函数
function waterfall(parent, item) {
// 获取瀑布流的父元素
var list = document.getElementById(parent);
// 获取所有单个图片的容器
var item = getClassObj(list, item);
// 获取瀑布流中单个列的宽度
var itemWidth = item[0].offsetWidth;
// 通过屏幕宽度除以单行列的宽度向下取整得出列数
var num = Math.floor(document.documentElement.clientWidth / itemWidth);
// 设置父元素的宽度为单行列的宽度乘以列的数量,并将其居中显示
list.style.cssText = 'width:' + itemWidth * num + 'px;margin:0 auto;';
// 存储每一行当中列的高度
var itemHeightList = [];
// 遍历循环每一个图表列表项
for (var i = 0; i < item.length; i++) {
// 存储当前图片的高度
var itemHeight = item[i].offsetHeight;
// 如果图片的数量小于当前的列数,即只有一行
if (i < num) {
// 将当前图片的高度压入到数组中
itemHeightList[i] = itemHeight;
} else {
// 求出数组中高度的最小值
var minHeight = Math.min.apply(null, itemHeightList);
// 获取数组中高度最小那张图片的下标
var minHeightIndex = getMinHeightIndex(itemHeightList, minHeight);
// 设置图片的定位为绝对定位
item[i].style.position = 'absolute';
// 设置图片的top值为行中最小高度值的那张图片的下面
item[i].style.top = minHeight + 'px';
// 设置图片的left值为行中最小高度值的那张图片的left值
item[i].style.left = item[minHeightIndex].offsetLeft + 'px';
// 设置行中高度最小那一列的高度等于该列剩余图下高度的累加
itemHeightList[minHeightIndex] += item[i].offsetHeight;
}
}
};
// 获取指定元素下所有类的子元素
function getClassObj(parent, className) {
// 获取指定元素下所有的子的元素
var obj = parent.getElementsByTagName('*');
// 存储结果
var result = [];
// 循环遍历
for (var i = 0; i < obj.length; i++) {
// 如果当前元素的样式类相等
if (obj[i].className == className) {
// 将该元素压入数组中
result.push(obj[i]);
}
};
// 返回结果
return result;
};
// 获取最小高度图片所在的下标
function getMinHeightIndex(list,height) {
for (var i in list) {
if (list[i] == height) {
return i;
break;
}
}
};
// 是否需要加载
function checkLoadImage() {
// 获取整个瀑布流的容器
var list = document.getElementById('list');
// 获取所有图片容器
var item = getClassObj(list, 'item');
// 获取最后一张图片的top值加上该图片自身高度的一半
var lastImageHeight = item[item.length - 1].offsetTop + Math.floor(item[item.length - 1].offsetHeight / 2);
// 获取页面滚动的距离，兼容标准模式与混杂模式
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 获取屏幕高度，兼容标准模式与混杂模式
var documentHeight = document.documentElement.clientHeight || document.body.scrollTop;
// 当lastImageHeight小于页面滚动距离与屏幕高度之和时，具备加载条件返回true，否则不具备返回false
return (lastImageHeight < scrollTop + documentHeight) ? true : false;
}
</script>
</body>
</html>
