WEB-HTML+CSS+JS-瀑布流-1

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间对象</title>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="box_img">
            <img src="img/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/5.jpg">
        </div>
    </div>
</div>
</body>
</html>

CSS:

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

JS:

window.onload=function (){
    imgLocation("container","box")
    var imgData={"data":[{"src":"2.jpg"},{"src":"3.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 = "img/"+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;
    //滚动条滚动的高度
    //console.log(lastContentHeight);
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    //页面的高度
    //console.log(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);
    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;
            //收集图片的高度.
            //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 allcontent=parent.getElementsByTagName("*");
    for (var i=0;i<allcontent.length;i++){
        if (allcontent[i].className ==content){
            contentArr.push(allcontent[i]);
        }
    }
     return contentArr;
}

WEB-HTML+CSS+JS-瀑布流-1

猜你喜欢