JS 瀑布流效果

秒速五厘米 2023-08-17 17:17 133阅读 0赞

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>

转载于:https://www.cnblogs.com/kikyoqiang/p/11247688.html