javascript瀑布流代碼

時間 2019-11-30
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            float: left;
            border: 1px solid #ccc;
            padding: 5px;
        }
    </style>
</head>
<body>
<div id="container">
    <!--(.box>img[src="images/P_00$.jpg"])*9-->
    <div class="box"><img src="images/P_000.jpg" alt=""/></div>
    <div class="box"><img src="images/P_001.jpg" alt=""/></div>
    <div class="box"><img src="images/P_002.jpg" alt=""/></div>
    <div class="box"><img src="images/P_003.jpg" alt=""/></div>
    <div class="box"><img src="images/P_004.jpg" alt=""/></div>
    <div class="box"><img src="images/P_005.jpg" alt=""/></div>
    <div class="box"><img src="images/P_006.jpg" alt=""/></div>
    <div class="box"><img src="images/P_007.jpg" alt=""/></div>
    <div class="box"><img src="images/P_008.jpg" alt=""/></div>
    <div class="box"><img src="images/P_009.jpg" alt=""/></div>
    <div class="box"><img src="images/P_010.jpg" alt=""/></div>
    <div class="box"><img src="images/P_011.jpg" alt=""/></div>
    <div class="box"><img src="images/P_012.jpg" alt=""/></div>
    <div class="box"><img src="images/P_013.jpg" alt=""/></div>
    <div class="box"><img src="images/P_014.jpg" alt=""/></div>
    <div class="box"><img src="images/P_015.jpg" alt=""/></div>
    <div class="box"><img src="images/P_016.jpg" alt=""/></div>
    <div class="box"><img src="images/P_017.jpg" alt=""/></div>
    <div class="box"><img src="images/P_018.jpg" alt=""/></div>
    <div class="box"><img src="images/P_019.jpg" alt=""/></div>
    <div class="box"><img src="images/P_000.jpg" alt=""/></div>
    <div class="box"><img src="images/P_001.jpg" alt=""/></div>
    <div class="box"><img src="images/P_002.jpg" alt=""/></div>
    <div class="box"><img src="images/P_003.jpg" alt=""/></div>
    <div class="box"><img src="images/P_004.jpg" alt=""/></div>
    <div class="box"><img src="images/P_005.jpg" alt=""/></div>
    <div class="box"><img src="images/P_006.jpg" alt=""/></div>
    <div class="box"><img src="images/P_007.jpg" alt=""/></div>
    <div class="box"><img src="images/P_008.jpg" alt=""/></div>
    <div class="box"><img src="images/P_009.jpg" alt=""/></div>
    <div class="box"><img src="images/P_010.jpg" alt=""/></div>
    <div class="box"><img src="images/P_011.jpg" alt=""/></div>
    <div class="box"><img src="images/P_012.jpg" alt=""/></div>
    <div class="box"><img src="images/P_013.jpg" alt=""/></div>
    <div class="box"><img src="images/P_014.jpg" alt=""/></div>
    <div class="box"><img src="images/P_015.jpg" alt=""/></div>
    <div class="box"><img src="images/P_016.jpg" alt=""/></div>
    <div class="box"><img src="images/P_017.jpg" alt=""/></div>
    <div class="box"><img src="images/P_018.jpg" alt=""/></div>
    <div class="box"><img src="images/P_019.jpg" alt=""/></div>
</div>
<script>
    //由於涉及到了圖片寬高 因此要寫在window.onload裏面

    //第一行是經過左浮動 天然擺放
    //後面是經過JS計算 高度最小的那一行 而後把圖片放到那個位置
    window.onload = function () {
        //找人
        var container = document.getElementById("container");
        var boxes = container.children;//全部的盒子
        //1.找出誰是第一行
        //計算第一行有多少張 或者也就是 頁面上有多少列
        //一行有多少張實際上 就是    頁面的寬度 / 盒子的寬度
        //頁面寬度
        var pageWidth = window.innerWidth;
        //盒子的寬度
        var boxWidth = boxes[0].offsetWidth;
        var column = Math.floor(pageWidth / boxWidth);//都是整數 因此要向下取整
        //console.log(column);
        //2.用一個數組保存 每一列的高度 找出最小值 和最小值的索引
        var arrHeight = [];
        //把每一列的初始高度 保存到數組中
        function waterfall() {
            //找出全部的盒子並處理
            for (var i = 0; i < boxes.length; i++) {
                //先只找出第一行的全部的盒子
                if (i < column) {
                    //boxes[i]//第一行的盒子
                    //把第一行的盒子的高度放到數組中
                    arrHeight[i] = boxes[i].offsetHeight;
                } else {
                    //第一行盒子以後的盒子
                    //根據 保存每行高度的數組中的 最小值去擺放
                    var minHeight = getMin(arrHeight).value;//最小的高度
                    var minHeightIndex = getMin(arrHeight).index;//高度最小的那一列
                    //擺放盒子其實就是設置盒子的top和left
                    //要想設置位置 先要加定位
                    boxes[i].style.position = "absolute";
                    //設置top值 top值就是高度最小的那一列如今的高度
                    boxes[i].style.top = minHeight + "px";
                    //設置left值 left值就是 高度最小的那一列全部圖片的offsetLeft
                    //其中第一行的最好找
                    boxes[i].style.left = boxes[minHeightIndex].offsetLeft + "px";
                    //放置圖片後 當前列的高度發生了變化 咱們要對數組的值進行更新
                    //而後 後續的循環才能根據新的數組 來從新尋找最小值

                    //給數組中以前 數值最小的那一項  加上當前這個圖片的高度
                    //在以前的高度的基礎上 再加上 新加入的圖片的高度
                    arrHeight[minHeightIndex] = minHeight + boxes[i].offsetHeight;
                }
            }
        }

        waterfall();
        //console.log(arrHeight);
        //console.log(minHeight);
        //console.log(minHeightIndex);

        //5.判斷觸底
        window.onscroll = function () {
            if (bottomed()) {
                //alert("觸底了,要加載圖片了");
                //加載圖片
                var json = [
                    {"src": "images/P_000.jpg"},
                    {"src": "images/P_001.jpg"},
                    {"src": "images/P_002.jpg"},
                    {"src": "images/P_003.jpg"},
                    {"src": "images/P_004.jpg"},
                    {"src": "images/P_005.jpg"},
                    {"src": "images/P_006.jpg"},
                    {"src": "images/P_007.jpg"},
                    {"src": "images/P_008.jpg"},
                    {"src": "images/P_009.jpg"},
                ];
                //.box>img
                for (var i = 0; i < json.length; i++) {
                    //json[i]//每一條數據
                    var div = document.createElement("div");
                    div.className = "box";
                    container.appendChild(div);
                    var img = document.createElement("img");
                    img.src = json[i].src;
                    div.appendChild(img);
                    //新加載出來的盒子 樣式有問題 須要從新經過JS設置位置
                    waterfall();

                }
            }
        };

        function bottomed() {
            //窗口的高度+頁面被捲去的頭部 > 最後一個盒子的offsetTop
            //窗口的高度
            var clientHeight = window.innerHeight;
            //頁面被捲去的頭部
            var scrollTop = window.pageYOffset;
            //最後一個盒子的offsetTop
            var lastBox = boxes[boxes.length - 1];//最後的盒子
            var lastBoxTop = lastBox.offsetTop;
            //窗口的高度+頁面被捲去的頭部 > 最後一個盒子的offsetTop
            if (clientHeight + scrollTop > lastBoxTop) {
                return true;//表示觸底了
            }
            return false;//沒有觸底
        }

    };


    function getMin(arr) {
        var min = {};
        min.index = 0;//最小值的索引
        min.value = arr[min.index];//最小值的值
        //遍歷數組 一個一個比較
        for (var i = 0; i < arr.length; i++) {
            if (min.value > arr[i]) {
                min.value = arr[i];
                min.index = i;
            }
        }
        return min;
    }

</script>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。