通过js原生实现瀑布流

缔造06

已于 2023-07-16 21:29:15 修改

阅读量151

点赞数

分类专栏： js 文章标签： javascript 前端 Powered by 金山文档

于 2023-03-21 21:12:41 首次发布

本文链接：https://blog.csdn.net/qq_30640985/article/details/129697807

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

瀑布流

什么是瀑布流

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

制作思路

首先第一步，此瀑布流为定宽

既然定宽，那么一共显示几列，我们也就能够计算出来。如下图所示：

列数出来之后，我们拿一个数组来保存一行的高度。什么意思？看下图：

我们按照 4 列来算，一开始一张图片都没有放，每一列的高度都为 0，所以数组里面是 4 个 0

接下来放入第一张图片，找数组里面最小的，目前都是 0，就放在第一列，放完之后需要更新数组里面的最小值

然后依此类推，找数组最小的，会找到第二个 0，往第二列放入图片，更新数组，找到第三个 0，往第三列放入图片，更新数组...

目前第一行满了，该放在第二行了，但是放在第二行的第几列呢？

实际上和上面的算法是一样的，找数组的最小值即可，哪个最小就放在哪一列，放完之后更新数组

新的高度的计算公式：

这一列新的高度 = 这一列高度（数组里面存储的有） + 间隙 + 新的图片高度

然而这只是计算了 top 值，还有 left 值我们需要计算。每张图片的 left 值只和该图片所在的列有关。

代码部分

.container {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #eee;
    position: relative;
  }
  
  /* 图片样式 */
.container img {
    position: absolute;
    transition: all 0.5s;
    width: 220px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/1.css">
</head>
<body>
    <div id="container" class="container">
        
    </div>
    <script src="../js/1.js"></script>
</body>
</html>

var div = document.querySelector("#container") //获取dom元素
var imgWidth = 220

function creatImg() {
    //创建img元素
    for (var i = 0; i <= 40; i++) {
        var src = `../img/${i}.jpg`//循环拿到照片
        var img = document.createElement('img')//创建img元素
        img.src = src;//设置图片的src地址
        img.style.width = imgWidth; //设置图宽度
        //在div里面添加图片
        div.appendChild(img)
        //排列每一张图片
        img.onload = setPositions;
    }
}
    //获取最大最小值
function getMin(arr) {
    var min = Math.min(...arr)
    return min
}
function getMax(arr) {
    var max = Math.max(...arr)
    return max
}
//排列！！！重点在这
function setPositions() {
    var containerWidth = div.clientWidth; //获取容器宽度
    var columns = Math.floor(containerWidth / imgWidth) //列数 容器宽度除照片的宽度，然后向下取整，得到最多装下多少列图片，剩下的部分作为间隙宽度
    var spaceNumber = columns + 1 //间隙数量=列数+1
    var leftSpac = containerWidth - columns * imgWidth //间隙总宽度等于容器宽度-（列数*照片宽度）
    var space = leftSpac / spaceNumber //每个间隙的空间=总宽度/间隙数
    //创建数组保留每一列的高度
    var arr = new Array(columns)
    arr.fill(0)//给数组填充0

    for (var i = 0; i < div.children.length; i++) {
        var img = div.children[i];  
        var min = getMin(arr)  //获取最小的那个一个
        img.style.top = min + "px";  //开始排列，每张图片都排列到高度最小的那个一列，就是要改变当前列的高度
        var index = arr.indexOf(min)           // 首先找到这个最小数对应的列数
        //新高度   新的高度 = 图片的高度 + 间隙的高度
        arr[index] += img.height + space;
        //整个top完成，还需要确定间隙的值
        //结合上图看
        //间隙值和列数有关，index+1保证设置的是距离左边的值以index为0解释
        //第一列*平均间隙宽度+0（第一列在数组种为0）*照片宽度
        //以第二列为例 2*平均宽度+1*照片宽度 第二列的位置在第一列距离左边的间隙+照片长度+第二列距离第一列的间隙
        var left = (index + 1) * space + index * imgWidth;
        img.style.left = left + "px";
    }
// 因为图片是绝对定位，脱离了标准流，所以无法撑开盒子的高度，所以利用最高的一列撑开盒子
    var max=getMax(arr)
    div.style.height=max+"px";
}
//函数防抖
var timeId=null;//计时器id
function change(){
    window.onresize=function(){
        //该函数会在窗口大小改变时重新对图片进行排列
    //至此简单的瀑布流已经完成接下来进行防抖
        if(timeId){//如果计时器存在则清除掉重新记录新的
            clearTimeout(timeId)
        }
        timeId=setTimeout(setPositions,50)
    }
}
function main() {
    //加入图片初始化操作
    creatImg()
    //绑定事件
    change()
}
main();