效果图如下
一，思路，重要的点是第一行排列之后往后的图片如何自动排到高度最小的那一列，需要做的就是找出第一行排列之后的高度最小的图片所在列，将下一张图片排到最小图所在列的下面，排好之后重新计算每一行当前每一列中最小高度，继续如上操作。
如图第一列高度小于第二列，所以第五张图片自动排到了第一列后面
实现瀑布流的要点有
①确定每行放几张图片，
每行的个数（column）=页面宽度（pageWidth）/（图片盒子宽度+图片间距）
②确定一行多少个之后首先需要将第一行排列好
③找出每一行的最小高度，排列完每一张图片之后更新最小高度
④当图片过多时实现鼠标滚动加载更多图片
实现：
html+css部分：
<style type="text/css">
.container {
width: 100%;
margin: 0 auto;
position: relative;
}
.box {
display: inline-block;
box-sizing: border-box;
padding: 10px 0 0 10px;
position: absolute;
}
.pic {
border: 5px solid #ccc;
}
img {
width: 200px;
}
</style>
<body>
<div class="container">
<div class="box">
<div class="pic">
<img src="../imgs/1.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/2.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/5g.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bag.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bei.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/5g.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bag.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bei.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/5g.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bag.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bei.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/1.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/2.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/3.jpg">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/5g.jpg" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bag.webp" alt="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="../imgs/bei.webp" alt="">
</div>
</div>
</div>
</body>
完整js部分代码：
<script type="text/javascript">
var boxs = document.getElementsByClassName('box')
var gap = 10;
var data = [
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp",
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp",
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp",
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp",
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp",
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp",
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp",
"../imgs/bei.webp",
"../imgs/1.webp",
"../imgs/3.jpg",
"../imgs/5g.jpg",
"../imgs/bei.webp"
]
window.onload = function() {
waterFull(); //加载页面时执行函数
//滚动条滚动时触发事件
var flag=true;//当为true时触发滚动条加载图片，加载完data里面的数据之后改为false，防止连续触发。
window.onscroll = function() {
if (checkScroll) {
var container = document.getElementsByClassName('container')[0];
if(flag){
for (let i = 0; i < data.length; i++) {
var box = document.createElement('div');
box.className = 'box';
container.appendChild(box);
var picture = document.createElement('div');
picture.className = 'pic';
box.appendChild(picture);
var imgs = document.createElement('img');
imgs.src = data[i];
picture.appendChild(imgs)
}
flag=false;
}
waterFull();
}
}
}
function waterFull() {
//首先确定一行多少列，列数=页面宽度/盒子宽度
var pageWidth = document.body.clientWidth //获取页面内容区宽度
// console.log(document.body.clientWidth)
var boxWidth = boxs[0].offsetWidth; //获取盒子宽度，offsetWidth方法获取元素的宽度
// console.log(boxWidth)
var columns = parseInt(pageWidth / (boxWidth + gap)); //计算列数
console.log(columns)
var arr = []; //定义数组用于存储盒子的高度
for (var i = 0; i < boxs.length; i++) {
if (i < columns) {
//判断是否是第一行，如果是第一行直接使用定位排列第一行
boxs[i].style.top = 0;
boxs[i].style.left = (boxWidth + gap) * i + 'px';
arr.push(boxs[i].offsetHeight);
console.log(boxs[i].offsetHeight);
} else {
//其他行排列
//首先找出高度最小的列和索引，将下一个图片放到高度最小的列下面
var min = arr[0] //令第一列高度最小，然后一次与第一列高度比较得出真正高度最小的列
var index = 0; //用来存储最小列高度的下标
//排序算法找出最小高度
for (var j = 0; j < arr.length; j++) {
if (arr[j] < min) {
min = arr[j];
index = j;
}
}
//设置下一个盒子的位置
boxs[i].style.top = arr[index] + gap + 'px';
boxs[i].style.left = boxs[index].offsetLeft + 'px';
}
//重新计算最小列的高度
arr[index] = arr[index] + boxs[i].offsetHeight + gap;
}
}
//实现响应式，添加resize事件，触发函数，当页面大小发生变化时重新计算
//页面宽度和列数
window.onresize = function() {
waterFull();
}
//监听鼠标滚动事件
function checkScroll() {
var H = document.body.clientHeight;
var scrollH = document.body.scrollTop;
var boxH = boxs[boxs.length - 1].offsetTop + Math.floor(bosx[boxs.length - 1].offsetHeight / 2);
return (boxH < H + scrollH) ? true : false;
}
</script>
583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
