关于javascript:javascript实现瀑布流

利用 js 实现瀑布流，实现滚动不到底的性能，当然你也能够加一个判断设置一个终止滚动的值。(document.body.scrollHeight < 数值)
图片须要本人增加

效果图：
<!DOCTYPE html>
<html lang="en">

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

            body {background-color: #364e66;}

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

            .item img {
                width: 192px;
                display: block;
            }

            .item {
                padding: 4px;
                position: absolute;
                background-color: #fff;
                box-shadow: 5px 5px 5px #253544;
            }
        </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 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>
        <script>
            // 用 onload 等
            onload = function () {
                // 获取元素
                var itemBox = document.getElementsByClassName('itemBox')[0];
                var items = document.getElementsByClassName('item');
                var itemBoxW = itemBox.offsetWidth;
                var itemW = items[0].offsetWidth;
                // 求出列数
                var column = parseInt(itemBoxW / itemW);
                // 求出 div 之间的间距
                var distance = (itemBoxW - column * itemW) / (column - 1);
                // console.log(distance);
                // 滚动款式 
                console.log(column);
                console.log(distance);
                // 创立数组获取高度
                var arr = [];
                waterFull();
                onscroll = function () {// if ((window.pageYOffset + window.innerHeight > getMin(arr).minV) && (document.body.scrollHeight < 1080)) {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++) {
                            // 创立 div 和 img 放入到 itemBox 中
                            var div = document.createElement('div');
                            var img = document.createElement('img');
                            img.src = json[i].src;
                            div.className = 'item';
                            itemBox.appendChild(div);
                            div.appendChild(img);
                        }
                    }
                    waterFull();}
                // 实现瀑布流的办法
                function waterFull() {for (var i = 0; i < items.length; i++) {if (i < column) {items[i].style.left = (itemW + distance) * i + 'px';
                            // 获取高度
                            arr[i] = items[i].offsetHeight;
                        } else {
                            // 最小的高度
                            var minV = getMin(arr).minV;
                            // 最小高度的索引
                            var minI = getMin(arr).minI;
                            items[i].style.left = (itemW + distance) * minI + 'px';
                            items[i].style.top = minV + distance + 'px';
                            // 从新批改数组内这项的值
                            arr[minI] = minV + items[i].offsetHeight + distance;

                        }
                    }
                }
                // 获取数组的最小值和索引
                function getMin(arr) {var obj = [];
                    // 假如 0 最小
                    obj.minV = arr[0];
                    obj.minI = 0;
                    for (var i = 0; i < arr.length; i++) {if (obj.minV > arr[i]) {obj.minV = arr[i];
                            obj.minI = i;
                        }
                    }
                    return obj;
                }
            }
        </script>
    </body>

</html>
关于javascript:javascript实现瀑布流

代码

index.html
