美文网首页
瀑布流Demo

瀑布流Demo

作者: 机器猫的百宝袋 | 来源:发表于2015-09-01 11:46 被阅读190次
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>瀑布流</title>
        <link rel="stylesheet" type="text/css" href="瀑布流.css">
        <script src="瀑布流.js"></script>
    </head>
    <body>
        <div id = "container">
            <div class="box">
                <div class="box_img">
                    <img src="">
                </div>
            </div>
            <div class="box">
                <div class="box_img">
                    <img src="">
                </div>
            </div>
            <div class="box">
                <div box_img>
                    <img src="">
                </div>
            </div>
        </div>
    </body>
    </html>
    
    *{
        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;
    }
    
    
    window.onload = function () {
        imgLocation("container", "box");
    
        var imgData = {"data": [{"src": "图片"}, {"src": "图片"}, {"src": "图片"}, {"src": "图片"}]}
        window.onscroll = function () {
            if (checkFlag()) {
                var cparent = document.getElementById("container");
                for (var i = 0; i < imgData.data.length; i++) {
                    var ccontent = document.createElment("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 = imgData.data[i].src
                    boximg.appendChild(img);
                }
                imgLocation("container", "box");
            }
        }
    }
    
    function checkFlag() {
        var cparent = docement.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;
        if (lastContentHeight < scrollTop + pageHeight) {
            return true;
        }
    }
    
    
    function imgLocation(parent, content) {
        //将parent下的所有内容全部取出
        var cparent = document.getElementById(parent);
        var ccontent = getChildElement(cparent, content);
        //console.log(ccontent.length);
        var imgWidth = ccontent[0].offsetWidth;
        var num = Math.floor(document.documentElement.clientWidth / imgWidth);
        cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0 auto";
    
        var BoxHeightArr = [];
        for (var i = 0; i < ccontent.length; i++) {
            if (i < num) {
                BoxHeightArr[i] = ccontent[i].offsetHeight;
            } else {
                var minHeight = Math.min.apply(null, BoxHeightArr);
                //console.log(BoxHeightArr[i]);
                var minIndex = getMinHeightLocation(BoxHeightArr, minHeight);
                ccontent[i].style.position = "absolute";
                ccontent[i].style.top = minHeight + "px";
                ccontent[i].style.left = ccontent[minIndex].offsetLefta + "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 allContent = parent.getElementsByTagName("*");
        for (var i = 0; i < allContent.length; i++) {
            if (allContent[i].className == content) {
                contentArr.push(allContent[i]);//向其末未进行追加
            }
        }
        return contentArr;
    }
    

    相关文章

      网友评论

          本文标题:瀑布流Demo

          本文链接:https://www.haomeiwen.com/subject/pkhlcttx.html