js图片瀑布流原理demo

最新推荐文章于 2025-06-16 11:18:51 发布

转载最新推荐文章于 2025-06-16 11:18:51 发布 · 381 阅读

前端js 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的瀑布流布局方法，并通过JavaScript实现了动态调整布局的功能。通过计算每张图片的位置和高度，确保了图片能够均匀地分布在页面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*使用通配符将内外边距都设置为零, 这样看着好看*/
        *{
            margin: 0px;
            padding: 0px;
        }
        /*将主容器的布局方式设置为相对布局*/
        #contianer{
            position: relative;
        }

        .box{
            padding: 5px;
            float: left;
        }
        /*将承载图片的容器定制颜色及边框大小和圆角*/
        .boximg{
            padding: 5px;
            box-shadow: 0 0 5px #ccc;
            border: 1px solid #cccccc;
            border-radius: 5px;
        }
        /*定制图片尺寸*/
        .boximg img{
            width: 250px;
            height: auto;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="boximg">
            <img src="img/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/7.gif">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="boximg">
            <img src="img/9.jpg">
        </div>
    </div>

</div>

</body>
<script>
    window.onload = function(){
        waterFlow("container", "box");
    };
    function waterFlow(parent, chirld){
        var wparent = document.getElementById(parent);//获取父级div, 最外级容器
        var allArr = getAllChirld(wparent,chirld);//获取到所有的class为box的容器div
        var wscreenWidth = document.documentElement.clientWidth;//获取屏幕宽度
        var wchirldWidth = wparent.getElementsByTagName("*");//获取所有的标签
        var num = Math.floor(wscreenWidth/wchirldWidth[0].offsetWidth);//这是一个Math算法, 目的是将小数转变为整数,
        // 从而可以知道每行最多容纳几张图片
        wparent.style.cssText = 'width:'+wchirldWidth[0].offsetWidth*num+'px;margin:0 auto';//固定每行摆放个数 和上下左右边距
        //获得每行的最小高度
        getMinHeightOfCols(allArr, num);
    }
    function getAllChirld(parent,classname){
        //获取所有的标签
        var wchirld = parent.getElementsByTagName("*");
        //创建数组
        var chirldArr = [];
        //遍历wchirld, 将其中className等于classname(传进来的参数)相同的标签放入数组chirldArr中
        for(var i = 0; i<wchirld.length; i++){
            if(wchirld[i].className==classname){
                //因为是位push所以没放进去一个, 都是在数组的最后一个
                chirldArr.push(wchirld[i]);
            }
        }
        //返回该数组
        return chirldArr;
    }
    function getMinHeightOfCols(chirdArr, num){
        //创建数组, 用来盛放每一行的高度
        var onlyOneColsArr = [];
        for(var i = 0; i<chirdArr.length; i++){

            if(i<num){
                //num为传进来的参数, 即为每行放图片的张数, 此步骤的目的是为了将第一行每张图片的高度遍历出来存放如新数组
                onlyOneColsArr[i]=chirdArr[i].offsetHeight;
            } else {
                //当大于每行存放的图片个数时进入该方法, Math.min.apply这个方法是为了得到数组中的最小值
                var minHeightOfCols = Math.min.apply(null, onlyOneColsArr);
                //此方法的目的是为了得到最小高度图片的下表, 也就是在每行的第几张, 具体方法见下面
                var minHeightOfindex = getminIndex(onlyOneColsArr, minHeightOfCols);
                //定义布局方式为绝对布局
                chirdArr[i].style.position = "absolute";
                //得到下一行图片应放的高度
                chirdArr[i].style.top = minHeightOfCols + "px";
                //得到下一行图片应放于那个位置
                chirdArr[i].style.left = chirdArr[minHeightOfindex].offsetLeft + "px";
                //将两张图片高度相加得到一个新的高度用来进行下一次的计算
                onlyOneColsArr[minHeightOfindex] += chirdArr[i].offsetHeight;
            }
        }

    }
    //此方法是为了进行最小高度下标的确定
    function getminIndex(onlyOneColsArr, min){
        //遍历传进来的高度数组
        for(var i in onlyOneColsArr){
            //如果高度等于最小高度, 返回i即为该图片下标
            if(onlyOneColsArr[i] == min){
                return i;
            }
        }
    }
</script>
</html>