圖片瀑布流

時間 2019-11-08

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .itemBox {
            width: 1050px;
            margin: 0 auto;
            position: relative;
        }

        .item {
            border: 1px solid #ccc;
            padding: 4px;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="itemBox">
        <div class="item">
            <img src="./images/P_000.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_001.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_002.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_003.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_004.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_005.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_006.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_007.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_008.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_009.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_000.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_001.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_002.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_003.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_004.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_005.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_006.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_007.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_008.jpg" alt="">
        </div>
        <div class="item">
            <img src="./images/P_009.jpg" alt="">
        </div>
    </div>
</body>
<script>

    window.onload = function () {
        /* 
        思路分析
        1 獲取到.itemBox 寬度
        2 獲取到.item 寬度
        3 求出列數
        4 求出間距
        5 實現瀑布流佈局的方法
        6 滾動頁面時 加載數據
     */
        // 獲取到相關元素
        var itemBox = document.getElementsByClassName('itemBox')[0];
        var items = document.getElementsByClassName('item');
        // 1 獲取到.itemBox 寬度
        var itemBoxW = itemBox.offsetWidth;
        // 2 獲取到.item 寬度
        var itemW = items[0].offsetWidth;
        // 3 求出列數
        var column = parseInt(itemBoxW / itemW);
        // 4 求出間距
        var distence = (itemBoxW - itemW * column) / (column - 1);
        console.log(distence);
        // 5 實現瀑布流佈局的方法
        // 定義一個存儲每列高度的容器
        var arr = [];
        waterFull();
        // 6 滾動頁面時 加載數據
        window.onscroll = function () {
            if (window.pageYOffset + window.innerHeight > getMin(arr).minV) {
                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" },
                    { "src": "./images/P_010.jpg" }
                ];
                for (var i = 0; i < json.length; i++) {
                    var div = document.createElement('div');
                    div.className = 'item';
                    var img = document.createElement('img');;
                    img.src = json[i].src;
                    div.appendChild(img);
                    itemBox.appendChild(div);
                }
                waterFull();


            }
        }
        // 實現瀑布流佈局的方法
        function waterFull() {
            for (var i = 0; i < items.length; i++) {
                if (i < column) {
                    items[i].style.left = (itemW + distence) * i + 'px';
                    arr[i] = items[i].offsetHeight;
                    // console.log(arr);
                } else {
                    var minV = getMin(arr).minV;
                    var minI = getMin(arr).minI;
                    items[i].style.left = (itemW + distence) * minI + 'px';
                    items[i].style.top = minV + distence + 'px';
                    arr[minI] = minV + distence + items[i].offsetHeight;

                }

            }
        }

        // 獲取數組的最小值以及索引
        function getMin(arr) {
            var obj = {};
            obj.minV = arr[0];
            obj.minI = 0;
            for (var i = 1; i < arr.length; i++) {
                if (obj.minV > arr[i]) {
                    obj.minV = arr[i];
                    obj.minI = i;
                }
            }
            return obj;
        }

    }
</script>

</html>

data數據html

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" },
{ "src": "./images/P_010.jpg" }
];json

相關標籤/搜索

每日一句

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