<!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>
</head>
<style>
* {
position: relative;
/* margin:0px;
padding: 0px; */
}
img {
display: block;
width: 220px;
}
#box {
margin: 0px auto;
}
.item {
box-shadow: 2px 2px 2px #999999;
/*设置为绝对定位,js通过top,left固定每个图片的位置*/
position: absolute;
}
</style>
<body>
<div id="box">
<img class="item" src="./images/31.jpg" alt="" />
<img class="item" src="./images/12.jpg" alt="" />
<img class="item" src="./images/22.jpg" alt="" />
<img class="item" src="./images/13.jpg" alt="" />
<img class="item" src="./images/14.jpg" alt="">
<img class="item" src="./images/5.jpg" alt="">
<img class="item" src="./images/6.jpg" alt="">
<img class="item" src="./images/4.jpg" alt="">
<img class="item" src="./images/27.jpg" alt="">
<img class="item" src="./images/28.jpg" alt="">
</div>
<script>
// img图片资源,有时加载耗时比较长,js中直接获取拿不到一些属性
window.onload = function () {
// 1 获取节点
let boxObj = document.getElementById('box');
// 如果使用query获取,每次追加则要重新获取图片节点
let imgsObj = document.querySelectorAll('.item');
// 使用getElements则不用
//let imgsObj = document.getElementsByClassName('item');
// 2 计算页面中能显示几列
// 2-1 获取当前可视区域宽度
let cliW = window.innerWidth || document.body.clientWidth;
// 2-2 获取图片的宽度
let imgW = imgsObj[0].offsetWidth;
//console.log(cliW);
let col = parseInt(cliW / imgW);
// console.log(col);
// 左右和上下间隔
let leftM = 10;
let topM = 10;
waterFull();
// 控制图片的显示
function waterFull() {
imgsObj = document.querySelectorAll('.item');
// 保存图片高度
let imgHArr = [];
//1 遍历所有的图片
Array.from(imgsObj).forEach((img, key) => {
// console.log(img);
if (key < col) {
// 第一排图片
// top值为0
img.style.left = (imgW + leftM) * key + 'px';
// 图片高度和数组中元素是一一对应的
imgHArr.push(img.offsetHeight);
} else {
// 非第一排
// 2 找到所有元素中,最小的值
//2-1 假设最小值,同时添加索引
let min = imgHArr[0];
let minIndex = 0;
imgHArr.forEach((vv, kk) => {
// 比较当前元素和循环元素
if (min > vv) {
min = vv; // 交换最小值
minIndex = kk;
}
});
//console.log(min, minIndex);
// 给最短的一列追加图片
img.style.left = imgsObj[minIndex].offsetLeft + 'px';
img.style.top = min + topM + 'px';
// 更新图片高度数组
imgHArr[minIndex] = min + img.offsetHeight + topM;
}
});
//console.log(imgHArr);
}
/*******无限加载的实现******/
// 获取可视区高度
let cliH = window.innerHeight;
//console.log(cliH);
let imgArr = [
'./images/yan.jpg',
'./images/wang.jpg',
'./images/40.jpg',
'./images/he.jpg',
'./images/37.jpg',
'./images/41.jpg',
'./images/40.jpg',
'./images/xing.jpg'
];
//2 滚动条事件
window.onscroll = function () {
// 内容高度
let contH = imgsObj[imgsObj.length - 1].offsetTop;
// 滚动条高度
let scroll = document.documentElement.scrollTop;
//console.log(scroll);
// 判断内容高度,是否小于滚动条+可视区域高度
if (contH < (cliH + scroll)) {
// console.log(1111);
let imgTag = '';
imgArr.forEach((img) => {
imgTag += '<img src=' + img + ' class="item">';
});
// 追加到box中
// console.log(imgTag);
box.innerHTML += imgTag
waterFull();
}
}
}
</script>
</body>
</html>
JS로 그림 폭포 흐름 + 무한 폭포 흐름 효과의 간단한 구현
추천
출처blog.csdn.net/qq_26705343/article/details/113887092
추천
행