JS实现瀑布流

HTML:先让图片充满一页

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script src="js/app.js"></script>
</head>
<body>
    <div id="container"><div class="box">
          <<div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div><div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div></div></div>

</body>
</html>

app.js:

window.onload=function() {
    imgLocation("container");
    var imgData={"data":[{"src":"2.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};
    window.onscroll =function(){
        if(checkFlag()){
            var cparent = document.getElementById("container");
            for(var i=0;i<imgData.data.length;i++){
                var cnode=document.createElement("div");
                cnode.className="box";
                cparent.appendChild(cnode);
                var boxImg=document.createElement("div");
                boxImg.className="box_img";
                cnode.appendChild(boxImg);
                var img=document.createElement("img");
                img.src="img/"+imgData.data[i].src;
                boxImg.appendChild(img);
            }
            imgLocation("container");
        }
    }
}

function checkFlag(){
    var cparent = document.getElementById("container");
    var arr=cparent.childNodes;
    var lastContentHeight=arr[arr.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){
    var cparent = document.getElementById(parent);
    var arr=Array.prototype.slice.call(cparent.childNodes,0);
    var imgWidth=arr[0].offsetWidth;
    var num=parseInt(document.documentElement.clientWidth/imgWidth);
    cparent.style.cssText="width:"+imgWidth*num+"px;"+"margin:0px auto";

    var boxHeightArr=[];
    for(var i=0;i<arr.length;i++){
        if(i<num){
            boxHeightArr[i]=arr[i].offsetHeight;
        }else{
            var minHeight=Math.min.apply(null,boxHeightArr);
            var index=getMinHeightindex(boxHeightArr,minHeight);
            arr[i].style.position = "absolute";
            arr[i].style.top = minHeight+"px";
            arr[i].style.left = arr[index].offsetLeft+"px";
            boxHeightArr[index] = boxHeightArr[index]+arr[i].offsetHeight;
        }
    }
}

function getMinHeightindex(boxHeightArr,minHeight){
    for(var i in boxHeightArr){
        if(boxHeightArr[i]==minHeight){
            return i;
        }
    }
}

css:

*{
    padding:0px;
    margin:0px;
}
#container{
    position:relative;
}
.box{
    padding:5px;
    float:left;
}
.box_img{
    padding:5px;
    border:1px solid #cccccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #cccccc;
}
.box_img img{
    width:150px;
    height: auto;
}

 

posted @ 2015-12-23 15:07  很好玩  阅读(340)  评论(0)  编辑  收藏  举报