瀑布流（从左到右-完美方式）

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流--从左边到右排列（复制代码可直接运行，图片在本地无法正常加载请替换）</title>
</head>
<body style="padding: 10px">

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    .water-basic {
        position: relative;
    }
    .item {
        position: absolute;
        width: 200px;
        margin: 5px;
        height: auto;
        transition: all 1s;
        background-color: rgb(227, 227, 227);
    }
    img{
        max-width: 200px;
    }
</style>
<div class="water-basic">
    <div class="item box1">1
        <img src="image/demo.png"/>
    </div>
    <div class="item box2">2
        <img src="image/1.jpg"/>
    </div>
    <div class="item box1">3
        <img src="image/qiyu3-4K-blur.jpg"/>
    </div>
    <div class="item box4">4
        <img src="image/demo.png"/>
    </div>
    <div class="item box5">5
        <img src="image/1.jpg"/>
    </div>
    <div class="item box3">6
        <img src="image/2.jpg"/>
    </div>
    <div class="item box2">7</div>
    <div class="item box1">8
        <img src="image/qiyu3-4K-blur.jpg"/>
    </div>
    <div class="item box1">9</div>
    <div class="item box2">10</div>
    <div class="item box4">11
        <img src="image/qiyu3-4K-blur.jpg"/>
    </div>
    <div class="item box3">12</div>
    <div class="item box1">13</div>
    <div class="item box5">14</div>
    <div class="item box2">15</div>
    <div class="item box1">16</div>
    <div class="item box3">17</div>
    <div class="item box1">18</div>
    <div class="item box2">19</div>
</div>

<script>
    var test = (function init() {
        // 1、获取所有的盒子  宽度都是固定的
        var node = document.querySelectorAll('.item');
        // 2、获取第一个盒子的宽度+外边距
        var nodeWidth = node[0].offsetWidth + 10;
        // 3、这里根据浏览器视口大小进行动态更新展示一排显示的个数
        // let _obj = document.querySelector('.water-basic');  // 指定宽度 需要设置water-basic最大宽度
        let _obj = document.body;  // 整个浏览器视口大小
        var colCount = parseInt(_obj.offsetWidth / nodeWidth);
        // 4、定义一个数组保存最后一排的高度
        var colItemHeight = [];
        // 5、默认第一排都是为0
        for (var j = 0; j < colCount; j++) {
            colItemHeight.push(0);
        }
        // 6、遍历所有的盒子
        node.forEach(function (item) {
            // 7、假设第一排第一个为最小的高度
            var minHeight = colItemHeight[0];
            // 8、保存最小高度盒子的索引值
            var index = 0;
            // 9、遍历最新高度的数组
            colItemHeight.forEach(function (pro, idx) {
                // 10、判断最小高度是不是大于当前遍历到的高度
                if (minHeight > pro) {
                    // 11、如果条件成立  将当前最小的高度重新复制给最小高度变量
                    minHeight = pro;
                    // 12、同时更新当前最小高度盒子的索引
                    index = idx;
                }
            })
            // 13、获取到最小高度的盒子后  开始设置盒子的定位
            item.style.top = minHeight + 'px';
            item.style.left = (nodeWidth * index) + 'px';

            // 14、动态更新当前遍历的盒子的高度+外边距+最小盒子的高度
            colItemHeight[index] = (item.offsetHeight + 10) + colItemHeight[index];
        })
        return {init}
    })()

    document.body.onresize = function () {
        test.init();
    }

</script>

</body>
</html>
原文链接：https://blog.csdn.net/weixin_41535944/article/details/119543848
posted on 2023-04-11 12:00 小虾米吖~ 阅读(186) 评论(0) 编辑收藏举报