用JavaScript实现瀑布流效果

最新推荐文章于 2024-04-26 16:47:03 发布

VIP文章 ~进击的巨人~

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量701

点赞数 1

分类专栏：前端文章标签： js javascript 前端

本文链接：https://blog.csdn.net/weixin_44849651/article/details/104123361

版权

今天带来的是js实现瀑布流效果的总结，思路如下

确定每行能存放的图片数量（即列数）

① 获取父级对象；
② 获取包含img的div的父级元素对象数组，即获取类名为
box的对象数组；
③ 获取类名为box的div宽度(通过box[0].offsetWidth获取即可)；
④ 计算一行内能存放多少图片数量（即列数），并给类名为box的div标签的父级元素定宽，即给类名为container的div盒子定宽
定义一个高度数组heightArray存储每列中所有高度之和

① 先把第一行的box对象数组的高度存入数组heightArray
② 从第二行开始判断，确定图片要摆放的位置
a.查找高度数组heightArray中的最小值及其所对应的索引
b.通过最小值（即最小高度）和最小索引来确定图片的绝对定位位偏移，即top=minHeight;left=box[minIndex].offsetLeft;
c. 更新高度数组中的值，即最小索引所对应的值要加上新加入的盒子高度，即heightArray[minIndex]+=box[i].offsetHeight;

到这里瀑布流效果基本完成了，但是为了模拟不断的加载图片，让瀑布流效果不终止，可以加上滚动事件来完善。

判断是否加载图片

① 获取父级对象
② 获取类名为box的对象数组
③ 获取滚动距离和页面高度，即
④ 创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)，即lastHeight=
box[box.length-1].offsetTop+Math.floor(box[box.length-1].offsetHeight/2);
⑤ 当滚动高度+页面高度>lastHeight时，返回true，允许加载图片，否则返回false。
加载新的图片

① 获取父级对象
② 添加元素结点（document.createElement(“div”)便可)
③ 给新加的结点添加类名
④ 给新加的结点添加子节点以此类推，直到添加图片完毕

至此所有的代码思路都书写完毕，代码如下

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>

关注