瀑布流照片墙

最新推荐文章于 2024-02-27 04:04:09 发布

「已注销」

最新推荐文章于 2024-02-27 04:04:09 发布

阅读量334

点赞数

分类专栏：案例文章标签： html css javascript

本文链接：https://blog.youkuaiyun.com/lyc_3858/article/details/125053816

版权

案例专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何创建瀑布流照片墙，重点在于等宽不等高的逻辑，即谁短插谁的原则。通过设置大盒子包裹图片并给予固定宽度，不设定高度，再结合CSS浮动布局实现。此外，还科普了offsetWidth、offsetLeft、offsetTop及offsetParent等JavaScript属性在布局计算中的应用。

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

逻辑：等宽不等高,谁短插谁

看代码注释

结构

大盒子包着所有图片,大盒子和图片都一定得给宽度,高度不用给,给图片浮动。

科普

offsetWidth: 元素的width+元素的padding+边框的宽度 (和offsetHeight是一对)

offsetLeft和offsetTop:元素到offsetParent左边或者顶部的距离。

offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed）,如果有定位元素,那就是有定位元素的那个父级;若祖宗都不符合条件，offsetParent为body。

注意:如果想拿到元素到body左边或者顶部的距离,父级有定位的话,那就得一层一层往上加。

<!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>瀑布流照片墙</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content{
            width: 100%;
        }
        .content > div{
            float: left;
            border: 1px solid #ccc;
            padding: 10px;
        }
        .content > div > img{
            width: 530px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div>
            <img src="./1.jpg" alt="">
        </div>
        <div>
            <img src="./2.jpg" alt="">
        </div>
        <div>
            <img src="./3.jpg" alt="">
        </div>
        <div>
            <img src="./4.jpg" alt="">
        </div>
        <div>
            <img src="./5.jpg" alt="">
        </div>
        <div>
            <img src="./6.jpg" alt="">
        </div>
        <div>
            <img src="./7.jpg" alt="">
        </div>
        <div>
            <img src="./8.jpg" alt="">
        </div>
    </div>
    <script>
        window.onload = function(){
            //1、获取主容器的宽度
            var content = document.getElementsByClassName('content')[0];
            var contentWidth = content.offsetWidth
            
            //2、获取单个图片的宽度
            var imgs = content.children
            var imgsWidth = imgs[0].offsetWidth

            //3、每一行可以排列多少张图片
            var nums = Math.floor(contentWidth / imgsWidth)

            //4、收集第一排的所有高度
            var arrHeight = []
            for(var i = 0; i < imgs.length; i++){
                if(i < nums){   //这里都是第一行的元素
                    arrHeight.push(imgs[i].offsetHeight)
                }else{
                    //创建第一个元素的对象
                    var obj = {
                        //这里存放的是最小的高度,这里的值是初始化的值
                        minH:arrHeight[0],  
                        //这里存放最小高度的图片的下标,这里一样是初始值
                        minI:0
                    }
                    for(var j = 0; j < arrHeight.length; j++){
                        if(arrHeight[j] < obj.minH){
                            obj.minH = arrHeight[j],
                            obj.minI = j
                        }
                    }
                    imgs[i].style.position = 'absolute'
                    imgs[i].style.left = imgs[obj.minI].offsetLeft + 'px'
                    imgs[i].style.top = obj.minH + 'px'
                    //当前图片高度 = 最小图片高度 + 当前插在后面的图片高度
                    arrHeight[obj.minI] = arrHeight[obj.minI] + imgs[i].offsetHeight
                }
            }
        }
    </script>
</body>
</html>