原生JS实现瀑布流

最新推荐文章于 2023-08-16 09:35:47 发布

IIIlion

最新推荐文章于 2023-08-16 09:35:47 发布

阅读量301

点赞数

分类专栏： JavaScript 暴走前端文章标签：瀑布流 JavaScript

本文链接：https://blog.csdn.net/weixin_43534005/article/details/89741572

版权

JavaScript 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

暴走前端

2 篇文章 0 订阅

订阅专栏

HTML部分

<!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>
    <style>
        #water {
            width: 90%;
            margin: 0 auto;
            outline: 1px solid;
        }
        #water img{
            transition: all .5s;
        }
    </style>
</head>

<body>
    <div id="water">

    </div>
    <script src="./script/waterfall.js"></script>
    <script>
        var mockImgs = [];
        for (let i = 0; i < 41; i++) {
            mockImgs.push("./img/" + i + ".jpg");
        }
        createWaterfallArea(document.getElementById("water"), mockImgs);
    </script>
</body>

</html>

JS部分

function createWaterfallArea(areaDom, imgs, imgWidth = 220) {
    areaDom.innerHTML = "";
    areaDom.style.position = "relative";
    var containerWidth;
    var colNumber;//1行可以显示几张图片
    var gap; //图片之间的间隙
    var imgArray = [];
    //1. 添加图片
    addImgs();

    //2. 设置图片的位置
    setPositions();

    //3. 窗口尺寸改变事件
    var timer = null;
    window.addEventListener("resize", function(){
        //函数防抖
        if(timer){
           clearInterval(timer); 
        }
        timer = setTimeout(() => {
            setPositions();
        }, 500);
    })

    //函数区域

    function setParameters() {
        containerWidth = parseInt(areaDom.clientWidth);
        colNumber = parseInt(containerWidth / imgWidth);//1行可以显示几张图片
        gap = containerWidth - colNumber * imgWidth //图片之间的间隙
        if (colNumber > 1) {
            gap = gap / (colNumber - 1);
        }
    }

    /**
     * 添加图片
     */
    function addImgs() {
        for (var i = 0; i < imgs.length; i++) {
            var url = imgs[i];
            var img = document.createElement("img");
            img.src = url;
            img.style.width = imgWidth + "px";
            img.style.position = "absolute";
            img.addEventListener("load", function () {
                setPositions();
            })
            areaDom.appendChild(img);
            imgArray.push(img);
        }
    }

  
    /**
     * 设置所有图片的位置
     */
    function setPositions() {
        setParameters();
        var nextYs = new Array(colNumber);
        nextYs.fill(0);
        for (var i = 0; i < imgArray.length; i++) {
            var img = imgArray[i];
            //纵坐标
            var y = Math.min(...nextYs);
            var colIndex = nextYs.indexOf(y);
            //横坐标
            img.style.left = imgWidth * colIndex + gap * colIndex + "px";
            img.style.top = y + "px";
            //修改数组
            nextYs[colIndex] += parseInt(img.height) + gap;
        }
        //设置容器高度
        areaDom.style.height = Math.max(...nextYs) + "px";
    }
}

IIIlion

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现瀑布流

HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫