js实现瀑布流布局

js实现瀑布流布局

思路分析
  • 瀑布流布局是等宽不等高；
  • 为了让最后一行差距最小，从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推；
  • 父元素设置为相对定位，图片所在元素设置为绝对定位，然后通过设置top和left定位每个元素；
代码如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #water-box {
            width: 100%;
            max-width: 640px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .item {
            position: absolute;
            overflow: hidden;
        }

        .item img {
            width: 90%;
            height: 90%;
        }
    </style>
</head>

<body>

    <div id="water-box">
        <div class="item"><img src="./1.jpg" alt=""></div>
        <div class="item"><img src="./2.jpg" alt=""></div>
        <div class="item"><img src="./3.jpg" alt=""></div>
        <div class="item"><img src="./1.jpg" alt=""></div>
        <div class="item"><img src="./2.jpg" alt=""></div>
        <div class="item"><img src="./3.jpg" alt=""></div>
        <div class="item"><img src="./1.jpg" alt=""></div>
        <div class="item"><img src="./2.jpg" alt=""></div>
        <div class="item"><img src="./3.jpg" alt=""></div>
        <div class="item"><img src="./1.jpg" alt=""></div>
        <div class="item"><img src="./2.jpg" alt=""></div>
        <div class="item"><img src="./3.jpg" alt=""></div>
        <div class="item"><img src="./1.jpg" alt=""></div>
        <div class="item"><img src="./2.jpg" alt=""></div>
        <div class="item"><img src="./3.jpg" alt=""></div>
    </div>

    <script>
        // box为父元素选择器，item为子元素选择器，column为需要几列显示
        function waterFall(box, item, column) {
            // 获取父元素的宽度
            var boxWidth = $(box).width()

            // 子元素宽度为父元素宽度除以column
            var itemWidth = boxWidth / column

            // 设置子元素的宽度
            $(item).width(itemWidth)

            // 定义数组存放各列的高度
            var arr = []

            $(box + ' ' + item).each(function (i) {
                // 获取每个子项目的高度
                var itemHeight = $(this).height()

                // 当i < column时，说明子元素排列在第一行
                if (i < column) {
                    // 将第一行子元素的高度push到arr里面，便于后面获取哪一个高度最小
                    arr.push(itemHeight)

                    // 给第一行的子元素定位
                    $(this).css({
                        top: 0,
                        left: itemWidth * i
                    })
                } else {

                    // index为最小高度的索引
                    var minHeight = Math.min(...arr)
                    var index = arr.indexOf(minHeight)

                    // 将第一行后面的子元素添加到最小高度那一列下面
                    $(this).css({
                        top: arr[index],
                        left: itemWidth * index
                    })

                    /*
                    元素添加完以后，将那一列的高度变为：之前的高度和添加的子元素高度之和，
                    下一个元素定位时，会再在这三列高度中找到最小高度那列，并添加在其下面，以此类推
                    */ 
                    arr[index] = arr[index] + itemHeight
                }
            })
        }
        window.onload = function () {
            waterFall('#water-box', '.item', 2)
        }
    </script>
</body>

</html>
效果图如下

posted @ 2020-12-03 17:13  kyoumei  阅读(199)  评论(0)    收藏  举报