JS 瀑布流效果

時間 2019-12-02

原文原文鏈接

JS瀑布流效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JS瀑布流效果</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #container {
            position: relative;
        }

        .box {
            padding: 5px;
            float: left;
        }

        .box_img {
            padding: 5px;
            border: 1px solid #cccccc;
            box-shadow: 0 0 5px #ccc;
            border-radius: 5px;
        }

            .box_img img {
                width: 150px;
                height: auto;
            }
    </style>
</head>
<body>
    <div id="container">
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>

        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/1.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/2.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/3.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/4.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/5.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/6.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/7.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/8.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/9.jpg" /> </div> </div>
        <div class="box"> <div class="box_img"> <img src="/Scripts/img/img1/10.jpg" /> </div> </div>
    </div>

    <script>
        window.onload = function () {
            imgLocation("container", "box");
            var imgData = {
                "data": [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "5.jpg" },
                { "src": "6.jpg" }, { "src": "7.jpg" }, { "src": "8.jpg" }, { "src": "9.jpg" }, { "src": "10.jpg" }]
            };
            window.onscroll = function () {
                if (checkFlag()) {
                    var cparent = document.getElementById("container");
                    for (var i = 0; i < imgData.data.length; i++) {
                        var ccontent = document.createElement("div");
                        ccontent.className = "box";
                        cparent.appendChild(ccontent);
                        var boximg = document.createElement("div");
                        boximg.className = "box_img";
                        ccontent.appendChild(boximg);
                        var img = document.createElement("img");
                        img.src = "/Scripts/img/img1/" + imgData.data[i].src;
                        boximg.appendChild(img);
                    }
                    imgLocation("container", "box");
                }
            }
        }

        function checkFlag() {
            var cparent = document.getElementById("container");
            var ccontent = getChildElement(cparent, "box");
            var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
            console.log(lastContentHeight + " " + scrollTop + " " + pageHeight);
            if (lastContentHeight < scrollTop + pageHeight) {
                return true;
            }
        }

        function imgLocation(parent, content) {
            //將parent下的全部的content所有取出
            var cparent = document.getElementById(parent);
            var ccontent = getChildElement(cparent, content);
            console.log(ccontent);
            var imgWidth = ccontent[0].offsetWidth;
            var num = Math.floor(document.documentElement.clientWidth / imgWidth);
            cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0px auto;";

            var boxHeightArr = [];
            for (var i = 0; i < ccontent.length; i++) {
                if (i < num) {
                    boxHeightArr[i] = ccontent[i].offsetHeight;
                    console.log(boxHeightArr[i]);
                }
                else {
                    var minHeight = Math.min.apply(null, boxHeightArr);
                    var minIndex = getMinHeightLocation(boxHeightArr, minHeight);
                    ccontent[i].style.position = "absolute";
                    ccontent[i].style.top = minHeight + "px";
                    ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
                    boxHeightArr[minIndex] = boxHeightArr[minIndex] + ccontent[i].offsetHeight;
                }
            }
        }
        function getMinHeightLocation(BoxHeightArr, minHeight) {
            for (var i in BoxHeightArr) {
                if (BoxHeightArr[i] == minHeight) {
                    return i;
                }
            }
        }
        function getChildElement(parent, content) {
            var contentArr = [];
            var allConnect = parent.getElementsByTagName("*");
            for (var i = 0; i < allConnect.length; i++) {
                if (allConnect[i].className == content) {
                    contentArr.push(allConnect[i]);
                }
            }
            return contentArr;
        }
    </script>
</body>
</html>

相關標籤/搜索

每日一句

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