JavaScript -- 制作简易瀑布流

来源：互联网发布：优化的arnold 变换编辑：程序博客网时间：2024/05/17 20:31

由于是制作的本地文件，因此需要先准备好图片素材；
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;}

到此，瀑布流就完成了。

0 0