原生JS實現可伸縮瀑布流式佈局

時間 2019-11-12

原文原文鏈接

由於以前也沒機會接觸瀑布流式佈局，可是看了Pinterest和花瓣網以後，就急切想知道是怎麼作到的，真的蠻好看的哈哈、css

直接上代碼吧html

嗯不對先上效果圖：app

html部分：wordpress

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*使用通配符將內外邊距都設置爲零, 這樣看着好看*/
            * {
                margin: 0px;
                padding: 0px;
            }
            /*將主容器的佈局方式設置爲相對佈局，一下方式可設置container爲水平居中，詳見：http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/*/
            #container {
                position: relative;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
            }
            /*定製box尺寸*/
            .box {
                padding: 7px;
                float: left;
                box-sizing: border-box;
                width: 212px;  /* 圖片尺寸+wrapper內邊距+box內邊距 */
            }
            /*將承載圖片的容器定製顏色及邊框大小和圓角*/
            .wrapper {
                padding: 5px;
                box-shadow: 0 0 5px #ccc;
                border-radius: 5px;
            }
            .pic {
                font-size: 0; /*消除行內元素的間隙*/
            }
            .pic img {
                width: 100%;
                height: auto;
            }
            .wrapper > p {
                color: #999;
                background: #FAFAFA;
                font-size: 14px;
                padding-top: 5px;
            }
        </style>
    </head>
    <body>

            <div id="container">
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/1.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/2.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/3.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/4.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/5.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/6.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/7.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/8.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
                <div class="box">
                    <div class="wrapper">
                        <div class="pic">
                            <img src="imgs/9.jpg">
                        </div>
                        <p>此處爲文字說明</p>
                    </div>
                </div>
            </div>

    </body>

</html>

js部分：佈局

        <script>

            window.onload = function() { // 必定要頁面加載完成再調用
                waterFall.init('container', 'box');
            }
            
            window.onresize = function() {
                waterFall.init('container', 'box');
            }

            var waterFall = {
                init: function(container, box) {
                    var windowWidth = window.innerWidth;
                    var oContainer = document.getElementById(container);
                    oContainer.style.width = windowWidth > 1200 ? 1200 + 'px' : windowWidth + 'px';
                    var oBoxs = oContainer.getElementsByClassName(box);
                    var boxWidth = oBoxs[0].offsetWidth;
                    var containerWidth = oContainer.offsetWidth;
                    var col = containerWidth / boxWidth; // box列數
                    var arrHeight = []; // 用來記錄每列已添加box的高度
                    for (var i = 0; i < oBoxs.length; i++) {
                        oBoxs[i].style.position = "absolute"; // 給每一個box定義佈局方式爲絕對佈局
                        var boxHeight = oBoxs[i].offsetHeight;
                        if (i < col - 1) { // 第一行
                            arrHeight.push(oBoxs[i].offsetHeight);
                            oBoxs[i].style.top = 0;
                            oBoxs[i].style.left = i * boxWidth + 'px';
                        } else {
                            var minBoxHeight = Math.min.apply(null, arrHeight); // 求出arrHeight中最小高度的那一列
                            var index = this.getIndex(minBoxHeight, arrHeight); // 獲取以上最小高度那列的索引
                            oBoxs[i].style.top = minBoxHeight + 'px';
                            oBoxs[i].style.left = boxWidth * index + 'px';
                            arrHeight[index] += oBoxs[i].offsetHeight; // 因爲已添加box，因此此處更新arrHeight中已添加box那一列的高度值
                        }
                    }
                },
                getIndex: function(val, arr) { // 獲得索引
                    for (var i = 0 ; i < arr.length; i++) {
                        if (val == arr[i]) {
                            return i
                        }
                    }
                }
            }

        </script>