實現瀑布流佈局

時間 2020-05-16

原文原文鏈接

實現瀑布流佈局

瀑布流，又稱瀑布流式佈局。是比較流行的一種網站頁面佈局，視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據塊並附加至當前尾部，瀑布流的主要特性即是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片佈局模式。javascript

實例

主體思路是記錄每一列的高度，父容器相對定位，成員絕對定位，利用top與left屬性控制位置，每次新增長成員時找到高度最低的那個將成員置於其下方，便可實現瀑布流佈局。若是不須要動態加入成員，而只是一次性加載供展現用，那麼能夠考慮使用flex佈局將容器設置爲flex-direction: column;以及flex-wrap: wrap;並給予容器一個合適的高度來實現，還能夠使用CSS3新增的column-*多列布局來實現，這兩種也就是純CSS實現的瀑布流佈局的方式，可是因爲這兩種方式都是將成員縱向排列，並不適合須要動態插入成員的佈局，當須要動態插入成員時仍是須要使用Js來實現。css

<!DOCTYPE html>
<html>
<head>
    <title>Js瀑布流佈局</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
    <style type="text/css">
        #container{
            position: relative; /* 父容器relative */
        }
        .item{
            position: absolute; /* 成員設置爲absolute */
            display: flex; /* 主要爲顯示字居中 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            color: #fff; /* 字體顏色白色 */
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
    <script type="text/javascript">
        var column = 3; // 製做三列布局
        var counter = 0; // 計數器 爲顯示當前塊計數
        var columnHeight = Array(column).fill(0); // 記錄每列高度
        var container = document.getElementById("container"); // 父容器對象
        var colorList = ["#EAA78C", "#F9CD82", "#9ADEAD", "#9CB6E9", "#E49D9B", "#97D7D7", "#ABA0CA", "#9F8BEC","#ACA4D5", "#6495ED", "#7BCDA5", "#76B4EF","#E1C38F","#F6C46A","#B19ED1","#F09B98","#87CECB","#D1A495","#89D196","#FE9E9F", "#93BAFF", "#D999F9", "#81C784", "#FFCA62", "#FFA477"]; // 顏色列表
         
        function random(min=0, max=1) { // 生成隨機數
          return min + ~~((max-min)*Math.random()) // min <= random < max 
        }

        function findMinColumn(arr){ // 找到高度最小的列
            var min = arr[0];
            var index = 0;
            arr.forEach((v,i) => {
                if(v < min) {
                    min = v;
                    index = i;
                }
            })
            return [index,min];
        }


        function appendImg(){
            var gap = 3; // 間隙設爲3px
            for(let i=0;i<12;++i){ // 每次加載12個成員
                var unit = {
                    height:random(100,500), //隨機一個不定高度
                    width: 300, // 定寬
                    color: colorList[random(0,colorList.length)] // 隨機顏色
                }
                var [minIndex,min] = findMinColumn(columnHeight); // 獲取高度最小列以及下標
                var d = document.createElement("div");  // 建立一個節點
                d.className = "item"; // 設置class
                d.style.background = unit.color; // 設置背景顏色
                d.style.height = `${unit.height}px`; // 設置寬度
                d.style.width = `${unit.width}px`; // 設置寬度
                d.style.top = `${min + gap}px`; // 設置上偏移
                d.style.left = `${(300 + gap) * minIndex}px`; // 設置左偏移
                d.innerText = `${++counter}#${unit.height}X${unit.width}`; // 設置文字
                columnHeight[minIndex] += (unit.height+gap); // 更新選中列的高度
                container.appendChild(d); // 添加節點
            }
        }

        function init(){
            appendImg(); // 初始加載
            var endLoad = columnHeight.some(v => v > window.innerHeight); // 獲取是否有某列高度大於屏幕高度
            if(!endLoad) init(); // 若是沒有則遞歸調用繼續加載
        }

        (function(){
             init(); // 打開頁面自動加載
        })();

        window.onscroll = function (){ // 瀏覽器觸底事件
            var marginBottom = 0;
            if (document.documentElement.scrollTop){
                var scrollHeight = document.documentElement.scrollHeight;
                var scrollTop = document.documentElement.scrollTop + document.body.scrollTop;
                var clientHeight = document.documentElement.clientHeight;
                marginBottom= scrollHeight - scrollTop - clientHeight;
            } else {
                var scrollHeight = document.body.scrollHeight;
                var scrollTop = document.body.scrollTop;
                var clientHeight = document.body.clientHeight;
                marginBottom= scrollHeight - scrollTop - clientHeight;
            }
            if(marginBottom<=0) appendImg();
        }

    </script>
</html>

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://www.cnblogs.com/imgss/p/11072266.html
https://blog.csdn.net/weixin_44135121/article/details/98629830

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。