JavaScript 特效:图片瀑布流

最新推荐文章于 2024-09-14 18:52:56 发布

houyanhua1

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量181

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/houyanhua1/article/details/79604903

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

demo.html：

<!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 class="container" id="container">
    <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>
</body>
</html>
<script>
    window.onload = function () {
        var container = document.getElementById("container");
        var boxs = container.children;
        var pageWidth = window.innerWidth;
        var boxWidth = boxs[0].offsetWidth;
        var column = Math.floor(pageWidth / boxWidth);
        var arrHeight = [];
        function waterfall() {
            for (var i = 0; i < boxs.length; i++) {
                if (i < column) {
                    arrHeight[i] = boxs[i].offsetHeight;
                } else {
                    var minHeight = getMin(arrHeight).value;
                    var minHeightIndex = getMin(arrHeight).index;
                    boxs[i].style.position = "absolute";
                    boxs[i].style.left = boxs[minHeightIndex].offsetLeft + "px";
                    boxs[i].style.top = minHeight + "px";
                    arrHeight[minHeightIndex] = minHeight + boxs[i].offsetHeight;
                }
            }
        }
        waterfall();
        function bottomed() {
            var scrollTop = window.pageYOffset;
            var clientHeight = window.innerHeight;
            var lastBoxTop = boxs[boxs.length - 1].offsetTop;
            if ((scrollTop + clientHeight) > lastBoxTop) {
                return true;
            }
        }
        window.onscroll = function () {
            if (bottomed()) {
                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"},
                ]
                for (var i = 0; i < json.length; i++) {
                    var div = document.createElement("div");
                    div.className = "box";
                    var img = document.createElement("img");
                    img.src = json[i].src;
                    div.appendChild(img);
                    container.appendChild(div);
                }
                waterfall();
            }
        }
    }

    function getMin(arr) {
        var min = {};
        min.index = 0;
        min.value = arr[min.index];
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < min.value) {
                min.value = arr[i];
                min.index = i;
            }
        }
        return min;
    }


</script>

images/P_000.jpg：