元素js实现瀑布流 

<!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>瀑布流</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .item {
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            font-weight: 700;
            color: aliceblue;
            margin-right: 15px;
            margin-bottom: 15px;
            width: 205px;
            position: absolute;
        }

        .item-1 {
            background-color: rgb(206, 169, 169);
            height: 300px;
        }

        .item-2 {
            background-color: rgb(131, 226, 174);
            height: 150px;
        }

        .item-3 {
            background-color: rgb(77, 30, 30);
            height: 350px;
        }

        .item-4 {
            background-color: rgb(49, 62, 134);
            height: 300px;
        }

        .item-5 {
            background-color: rgb(230, 99, 99);
            height: 200px;
        }

        .item-6 {
            background-color: rgb(206, 169, 169);
            height: 300px;
        }

        .item-7 {
            background-color: rgb(124, 126, 145);
            height: 400px;
        }

        .item-8 {
            background-color: rgb(169, 199, 38);
            height: 230px;
        }

        .item-9 {
            background-color: rgb(114, 128, 53);
            height: 300px;
        }

        .item-10 {
            background-color: rgb(48, 54, 18);
            height: 260px;
        }

        .item-11 {
            background-color: rgb(118, 122, 96);
            height: 230px;
        }

        .item-12 {
            background-color: rgb(118, 122, 96);
            height: 240px;
        }

        .item-13 {
            background-color: rgb(118, 122, 96);
            height: 250px;
        }

        .item-14 {
            background-color: rgb(118, 122, 96);
            height: 270px;
        }

        .item-15 {
            background-color: rgb(118, 122, 96);
            height: 330px;
        }

        .item-16 {
            background-color: rgb(118, 122, 96);
            height: 200px;
        }

        .item-17 {
            background-color: rgb(118, 122, 96);
            height: 100px;
        }

        .item-18 {
            background-color: rgb(118, 122, 96);
            height: 400px;
        }

        .item-19 {
            background-color: rgb(118, 122, 96);
            height: 340px;
        }

        .item-20 {
            background-color: rgb(118, 122, 96);
            height: 350px;
        }

        .item-21 {
            background-color: rgb(118, 122, 96);
            height: 360px;
        }

        .item-22 {
            background-color: rgb(118, 122, 96);
            height: 370px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
        <div class="item item-11">11</div>
        <div class="item item-12">12</div>
        <div class="item item-13">13</div>
        <div class="item item-14">14</div>
        <div class="item item-15">15</div>
        <div class="item item-16">16</div>
        <div class="item item-17">17</div>
        <div class="item item-18">18</div>
        <div class="item item-19">19</div>
        <div class="item item-20">20</div>
        <div class="item item-21">21</div>
        <div class="item item-22">22</div>
    </div>
</body>
<script>
    var items = document.getElementsByClassName('item');
    //定义间隙10像素
    var gap = 10;
    //进页面执行函数
    window.onload = function () {
        waterFall();
    }

    function waterFall() {
        //首先确定列数 = 页面的宽度 / 图片的宽度
        var pageWidth = getClient().width;
        var itemWidth = items[0].offsetWidth;
        var columns = parseInt(pageWidth / (itemWidth + gap)); //列数。可以直接复制2
        var arr = []; //定义一个数组，用来存储元素的高度
        for (var i = 0; i < items.length; i++) {
            if (i < columns) {
                //满足这个条件则说明在第一行，文章里面有提到
                items[i].style.top = 0;
                items[i].style.left = (itemWidth + gap) * i + 'px';
                arr.push(items[i].offsetHeight);
            } else {
                //其他行，先找出最小高度列，和索引
                //假设最小高度是第一个元素
                var minHeight = arr[0];
                var index = 0;
                for (var j = 0; j < arr.length; j++) { //找出最小高度
                    if (minHeight > arr[j]) {
                        minHeight = arr[j];
                        index = j;
                    }
                }
                //设置下一行的第一个盒子的位置
                //top值就是最小列的高度+gap
                items[i].style.top = arr[index] + gap + 'px';
                items[i].style.left = items[index].offsetLeft + 'px';

                //修改最小列的高度
                //最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
                arr[index] = arr[index] + items[i].offsetHeight + gap;
            }
        }
    }

    //当页面尺寸发生变化时，触发函数，实现响应式
    window.onresize = function () {
        waterFall();
    }

    // clientWidth 处理兼容性
    function getClient() {
        return {
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
    }
    // scrollTop兼容性处理
    function getScrollTop() {
        return window.pageYOffset || document.documentElement.scrollTop;
    }
</script>

</html>
注意：如果要加入懒加载效果的话，可以参考我的之前一篇文章，讲的较为详细，由于这里没有在<div>里面添加图片，所以，不能实现懒加载效果。这里只设置了div，并且分别给div设置的高度，稍加繁琐。如果有合适的图片资源，可以不用设置。

    五.总结
    到这
posted @   coderwcb  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
· javascript 轮播图（缓存效果）详细篇
· javascript 遍历数组的常用方法（迭代、for循环 、for… in、for…of、foreach、map、filter、every、some，findindex）
· JS实现瀑布流页面布局
· js实现瀑布流排序加载效果
· Js实现瀑布流效果
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示