js实现瀑布流效果

最新推荐文章于 2023-07-11 20:01:53 发布

瑶瑶旺仔

最新推荐文章于 2023-07-11 20:01:53 发布

阅读量215

点赞数 2

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/waouya/article/details/130325887

版权

瀑布流是我们在网站中经常见到的效果，比如像花瓣网等一些素材网站最常见。今天就一起来实现瀑布流效果吧！效果如下：

1682240241000

整体逻辑就是我们把图片宽度写死，然后计算以body的宽度可以放下n张图片，然后创建一个长度为n的数组，初始值为0，这个数组的作用简单来说，就是计算每列图片的高度，然后每次放置图片的时候，去找该数组中最小值，也就是哪列高度最小就把图片放在哪列，然后更新数组对应下标的值。

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .waterBox{
            width: 100%;
            position: relative;
        }
        .item{
            position: absolute;
            width: 200px;
            margin: 5px;
            transition: all 1s;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="waterBox">
        <img src="./imgs/2D8EBE2E5B7AC941C58F89F2FA885228.jpg" title="1" class="item"/>
        <img src="./imgs/0F85CFEDD84968400A3FF6391070A2EE.jpg" title="2" class="item"/>
        <img src="./imgs/409CA99724AAEEBA1E2BAF4C946BE951.jpg" title="3" class="item"/>
        <img src="./imgs/4550635111B1948D0EC1C256577C6B1E.jpg" title="4" class="item"/>
        <img src="./imgs/pic5.webp" title="5" class="item"/>
        <img src="./imgs/pic6.jpg" title="6" class="item"/>
        <img src="./imgs/pic7.webp" title="7" class="item"/>
        <img src="./imgs/7AF4AE19F191DC8A99742C42041A38DD.jpg" title="8" class="item"/>
        <img src="./imgs/pic8.webp" title="9" class="item"/>
        <img src="./imgs/CE1720BD3E42C5D3FFCF13C8BB8A1793.jpg" title="10" class="item"/>
        <img src="./imgs/pic1.webp" title="11" class="item">
        <img src="./imgs/pic2.webp" title="12" class="item">
        <img src="./imgs/pic3.webp" title="13" class="item">
        <img src="./imgs/pic4.jpeg" title="14" class="item">
    </div>
    <script src="./test.js"></script>
</body>
</html>

js代码如下：

function waterFall(){
    //获取所有的图片
    let items=document.querySelectorAll('.item');

    //创建记录每列高度的数组
    let lenArr=[];
    let bodyWidth=document.body.offsetWidth;
    let itemWidth=items[0].offsetWidth

    //计算一行可以放几张图片
    let num=parseInt(bodyWidth/itemWidth)
    //初始化数组为0，意思是刚开始时还没放图片，每列高度均为0
    for(let i=0;i<num;i++){
        lenArr.push(0)
    }

    //遍历所有图片，寻找高度中最小的列进行放置
    items.forEach(item=>{
        let minHeight=lenArr[0]
        let index=0

        //计算出高度最小的列
        for(let i=0;i<lenArr.length;i++){
            if(minHeight>lenArr[i]){
                minHeight=lenArr[i]
                index=i  
            }
        }

        //放置图片，top就等于该列的高度，left就等于图片的宽度*索引值，并更新数组对应下标的值（主要是加上新放置图片的高度）
        item.style.top=minHeight+'px'
        item.style.left=(itemWidth*index)+'px';
        lenArr[index]=(item.offsetHeight+lenArr[index])
    })
}

//图片加载较为缓慢，如果直接调用waterFall函数，不放在onload里面的话，可能导致有些图片的高度无法获取到，可以自己试一试
window.onload = () => {
    waterFall()
}

//让图片布局可根据窗口大小的变化而变化
window.onresize = () => {
    waterFall()
}

主要需要注意的是把waterFall函数的调用放在onload里面，我写的时候直接调用导致后面的图片获取到的高度一直是1，这里是个值得注意的点！