html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<!-- 滚动调滑动时加载数据, 提高网页性能 针对图片高度不一 -->
<div class="g-container" id="container">
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
<div class="item">
<div class="pic">
<img src="img/1.jpg" >
</div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
list-style: none;
}
.g-container{
position: relative;
margin: 0 auto;
}
.g-container::after{
content:'';
display: block;
clear: both;
}
.item{
float: left;
padding: 15px 0 0 15px;
}
.pic{
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 5px #ccc;
border-radius: 12px;
}
.pic img{
width: 230px;
height: auto;
}
js:
// 盒子合理摆放:需要调用两次
// 1.页面加载
// 2.滚动条滚动
// 当文档加载完毕
window.onload = function() {
fwaterfull();
//滑动滚动条
window.onscroll = function() {
if (fScollTop()) {
// 获取container
var container = document.getElementById('container');
// 创建item
var oItem = document.createElement('div');
oItem.className = 'item'
// 创建Pic
var oPic = document.createElement('div');
oPic.className = 'item'
// 创建img
var oImg = document.createElement('div');
oImg.src = 'images/1.jpg'
// 添加操作
container.appendChild(oItem);
oItem.appendChild(oPic);
oPic.appendChild(oImg);
}
fwaterfull();
}
}
//盒子合理摆放的函数
function fwaterfull() {
var container = document.getElementById('container');
// 获取可是区域的宽度
var clientWidth = document.documentElement.clientWidth;
// 获取其中一个item的宽度
var oItem = document.getElementsByClassName('item');
var itemWidth = oItem[0].offsetWidth;
// 一行有多少个 用总宽度除以一个的宽度
var num = Math.floor(clientWidth / itemWidth);
// 设置container的宽度, 一行的几个item*每一个item的宽度
container.style.width = num * itemWidth + 'px'
// 下面是让第二趟或者第三趟盒子自动补位,其实就是定位
var hrr = [];
for (var i = 0; i < oItem.length; i++) {
if (i < num) {
// 第一排
hrr.push(oItem[i].offsetHeight)
} else {
// 用拓展运算符拿到最小高度
var minHeight = Math.min(...hrr);
// 得到最小值索引
var index = fun(minHeight, hrr);
// 第一排之后的
// 设置样式
oItem[i].style.position = 'absolute';
oItem[i].style.left = index * itemWidth + 'px'
oItem[i].style.top = minHeight + 'px'
// 改变数组最小值让他加载
hrr[index] += oItem[i].offsetHeight
}
}
}
// 计算索引
function fun(min, hrr) {
for (var i = 0; i < hrr.length; i++) {
if (hrr[i] == min) {
return i
}
}
}
// 判断什么条件加载图片
function fScollTop() {
// 所有item
var item = document.getElementsByClassName('item');
// 最后一个item
var lastItem = item[item.length - 1];
// 可是区域高度
var clientHeight = document.documentElement.clientHeight;
// 滚动距离
var scrollTop = document.documentElement.scrollTop;
if (lastItem.offsetHeight/2+lastItem.offsetTop < (clientHeight + scrollTop)) {
return true
} else {
return false
}
}