JavaScript -- 制作简易瀑布流

由于是制作的本地文件，因此需要先准备好图片素材；
HTML5文件：

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

        <div class="box">
            <div class="box_img">
                <img src="images/1.jpg">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/0.jpg">
            </div>
        </div>

         ……   这里需要多少图片自己决定，粘贴就行了

        <div class = "box">
                <div class="box">
            <div class="box_img">
                <img src="images/1.jpg">
            </div>
        </div>

        <div class="box">
            <div class="box_img">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/0.jpg">
            </div>
        </div>

    </div>

</body>
</html>

然后，创建一个file文件，命名为style.css，用来编辑图片的样式

*{
    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 #cccccc;
    border-radius: 5px;
}
.box_img img{
    width:150px;
    height: auto;
}

最后，创建一个JS文件，用来编辑页面属性


window.onload = function(){
    imgLocation("container","box");
    // 模拟的JSON数据
    var imgData = {"data":[{"src":"2.jpg"},{"src":"3.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 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 = "images/"+imgData.data[i].src;
                boximg.appendChild(img);

                // ------ 此时,图片已经可以无限加载,但是会有重影,没有按照之前的排布显示
            }
            // 重新调用布局的方法,解决上面的那个问题!
            imgLocation("container","box");
        }
    }
}

// 返回一个BOOL类型,来判断是否需要加载新的数据
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){
    //将父级控件中的所有content全部取出
    var cParent = document.getElementById(parent);
    var cContent = getChildElement(cParent,content);

    // 使用这个打印,可以在网页检查元素中看到打印的内容
    //console.log(cContent);

    var imgWidth = cContent[0].offsetWidth;  // 得到图片的宽度

    // 屏幕的宽度除以图片的宽度,得到一行展示的图片数量
    // num 就是一行显示图片的个数
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);

    // 固定
    // margin:0 auto 在这里的作用是让图片区域居中显示
    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 {
            // 具体apply方法的使用,记录在了博客里
            var minHeight = Math.min.apply(null,BoxHeightArr);
            //console.log("最小的高度:"+minHeight);

            // 调用下面的函数,得到第一行的图片中最矮的图片的下标
            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;
}

到此，瀑布流就完成了。

JavaScript -- 制作简易瀑布流

猜你喜欢