javaScript基础学习（6）（瀑布流例子）

最新推荐文章于 2024-02-26 12:24:10 发布

小溪彼岸

最新推荐文章于 2024-02-26 12:24:10 发布

阅读量437

点赞数

分类专栏：前端基础 # CSS样式

本文链接：https://blog.csdn.net/zww1984774346/article/details/51813527

版权

前端基础同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS样式

4 篇文章 0 订阅

订阅专栏

html:

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

        <div class="box">
            <div class="box_img" >
                <img src="../image/image.png">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../image/image2.jpg">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../image/image3.png">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../image/image3.png">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../image/image3.png">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../image/image3.png">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../image/image3.png">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="../image/image3.png">
            </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 #ccc;
    box-shadow:  0 0 5px #ccc;
    border-radius: 5px;
}

.box_img img{
    width: 150px;
    height: auto;
}

js:


window.onload = function(){

    imgLocation('container',"box");

    var imgData = {"data":[{"src":"image.png"},{"src":"image2.jpg"},{"src":"image3.png"}]};

    window.onscroll = function(){
        loadImage(imgData);
    };
    window.onresize = function(){
        imgLocation('container',"box");
    };
}

function loadImage(imgData){
    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 = "../image/"+imgData.data[i].src;
            boximg.appendChild(img);
        }
        imgLocation('container',"box");
    }
}

function checkFlag(){
    var cparent = document.getElementById("container");
    var ccontent = getChildElement(cparent,"box");
    var lastczontentHeight = ccontent[ccontent.length-1].offsetTop;
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if(lastczontentHeight<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 cols = Math.floor(document.documentElement.clientWidth / imgWidth);
    //设置父盒子的样式
    cparent.style.cssText = "width:"+imgWidth*cols+"px;margin:0 auto;";

    //获取最短的图片
    var BoxHeightArr = [];
    for(var i=0;i<ccontent.length;i++){
        if(i<cols){
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        }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;
}