手敲图片瀑布流布局 

<html>

<head>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        .box {
            margin: 0;
            padding: 0;
            overflow: hidden;
            float: left;
            width: 200px;
            border: 1px solid #eee;
            padding: 10px;
        }

        .box img {
            overflow: hidden;
            margin: 0;
            padding: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box"><img src="http://img02.ma.scrmtech.com/7ceb376aef9f613632bd99cbd6ba7fe9" alt=""></div>
    <div class="box"><img src="https://img02.ma.scrmtech.com/d196e8c332ddc4612eb538d46c2ca837" alt=""></div>
    <div class="box"><img src="https://img02.ma.scrmtech.com/c6cee70f22017f0ff13ad6a533d18f12" alt=""></div>
    <div class="box"><img src="https://img02.ma.scrmtech.com/00557663ffefa852773c6782efacd313" alt=""></div>
    <div class="box"><img src="https://img02.ma.scrmtech.com/d1e2928be263caf51138e893925e1da7" alt=""></div>
    <div class="box"><img src="https://img02.ma.scrmtech.com/d32cdb69aa31412bd12345a41052a227" alt=""></div>
    <div class="box"><img src="https://img02.ma.scrmtech.com/c0aa8d4eb2ba043ab299812dccd7536c" alt=""></div>

    <script>
        // $(function () {
        //     setTimeout(function () {
        //         waterFall()
        //     }, 300)
        // })
        window.onload = function () {
            waterFall()
        }
        function waterFall() {
            // 求出列数
            // 创建数组
            // 图片遍历循环
            var box = $(".box")
            var boxWidth = box.outerWidth() //outerWidth() innerWidth
            var screenWidth = $(window).outerWidth()
            var cols = parseInt(screenWidth / boxWidth)
            var heightArr = []
            $.each(box, function (index, item) {
                console.log($(item).outerHeight())
                var boxHeight = $(item).outerHeight()
                if (index < cols) {
                    heightArr[index] = boxHeight
                } else {
                    // 最小图片的高度
                    // 数组中最小的值 var arr = [100,150,80,300]
                    var minBoxHeight = Math.min(...heightArr)
                    var minBoxIndex = $.inArray(minBoxHeight, heightArr)
                    console.log(minBoxHeight, minBoxIndex)
                    $(item).css({
                        position: "absolute",
                        left: minBoxIndex * boxWidth + 8 + "px",
                        top: minBoxHeight + 10 + "px"
                    })
                    // 高度追加
                    heightArr[minBoxIndex] += boxHeight
                }
            })
        }

    </script>
</body>

</html>

 

posted @ 2020-08-14 11:54  问问大将军  阅读(116)  评论(0)    收藏  举报