共计 3822 个字符，预计需要花费 10 分钟才能阅读完成。
利用 js 实现瀑布流，实现滚动不到底的性能，当然你也能够加一个判断设置一个终止滚动的值。(document.body.scrollHeight < 数值)
图片须要本人增加
效果图：
代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {background-color: #364e66;}
.itemBox {
width: 1050px;
margin: 0 auto;
position: relative;
}
.item img {
width: 192px;
display: block;
}
.item {
padding: 4px;
position: absolute;
background-color: #fff;
box-shadow: 5px 5px 5px #253544;
}
</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 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>
<script>
// 用 onload 等
onload = function () {
// 获取元素
var itemBox = document.getElementsByClassName('itemBox')[0];
var items = document.getElementsByClassName('item');
var itemBoxW = itemBox.offsetWidth;
var itemW = items[0].offsetWidth;
// 求出列数
var column = parseInt(itemBoxW / itemW);
// 求出 div 之间的间距
var distance = (itemBoxW - column * itemW) / (column - 1);
// console.log(distance);
// 滚动款式
console.log(column);
console.log(distance);
// 创立数组获取高度
var arr = [];
waterFull();
onscroll = function () {// if ((window.pageYOffset + window.innerHeight > getMin(arr).minV) && (document.body.scrollHeight < 1080)) {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++) {
// 创立 div 和 img 放入到 itemBox 中
var div = document.createElement('div');
var img = document.createElement('img');
img.src = json[i].src;
div.className = 'item';
itemBox.appendChild(div);
div.appendChild(img);
}
}
waterFull();}
// 实现瀑布流的办法
function waterFull() {for (var i = 0; i < items.length; i++) {if (i < column) {items[i].style.left = (itemW + distance) * i + 'px';
// 获取高度
arr[i] = items[i].offsetHeight;
} else {
// 最小的高度
var minV = getMin(arr).minV;
// 最小高度的索引
var minI = getMin(arr).minI;
items[i].style.left = (itemW + distance) * minI + 'px';
items[i].style.top = minV + distance + 'px';
// 从新批改数组内这项的值
arr[minI] = minV + items[i].offsetHeight + distance;
}
}
}
// 获取数组的最小值和索引
function getMin(arr) {var obj = [];
// 假如 0 最小
obj.minV = arr[0];
obj.minI = 0;
for (var i = 0; i < arr.length; i++) {if (obj.minV > arr[i]) {obj.minV = arr[i];
obj.minI = i;
}
}
return obj;
}
}
</script>
</body>
</html>
正文完
发表至： javascript
2020-09-14
