js图片瀑布流效果

时间  2019-11-17
标签 图片 瀑布 效果 栏目 JavaScript 繁體版
原文   原文链接

要实现图片瀑布流效果，首先得准备几张图片。css

html的部分比较简单就是将图片加载到浏览器就能够了html

代码以下（注意放的图片多一点要否则以后没法滑动鼠标就没法达到瀑布流效果）：数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pool</title>
    <link rel="stylesheet" type="text/css" href="style2.css">
    <script src="js/app.js"></script>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="1.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="10.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="1.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="2.jpeg">
            </div>
        </div>
    </div>

</body>
</html>

style2.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;
}

 

app.js代码以下（灵魂）：app

 

window.onload = function (){
imgLocation("container","box");
    //准备的照片
    var imgData = {"data":[{"src":"10.jpg"},{"src":"9.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"}]};
    window.onscroll=function(){
        //鼠标滑轮一滑就加载图片实际上就是将图片添加到html中
        //就是添加下面东西到html中，src变化
        /*<div class="box">
            <div class="box_img">
            <img src="8.jpg">
            </div>
            </div>
          */
        if(checkOut()){
            //由于html是树结构的
            var cparent=document.getElementById("container");
            
            for(var i=0;i<imgData.data.length;i++){
                //分别建立2个div和一个img
                var boxDiv = document.createElement("div");
                var boxImgDiv = document.createElement("div");
                var Img = document.createElement("img");
                
                //给建立的节点添加与以前再html直接写出的图片区域同样的属性    
                boxDiv.className = "box";
                boxImgDiv.className = "box_img";
                Img.src = imgData.data[i].src;
                
                //肯定添加节点的位置（你建立的节点的父母是谁）
                cparent.appendChild(boxDiv);
                boxDiv.appendChild(boxImgDiv);
                boxImgDiv.appendChild(Img);


            }
            //按照以前的照片排列规则
            imgLocation("container","box");
        }
    }
}

function checkOut() {

    var ccontent=[];
    var cparent=document.getElementById("container");
    ccontent=getChildElement(cparent,"box");
    var lastTopheight= ccontent[ccontent.length-1].offsetTop;//最后一张照片距离最上面的高度（大于液面高度）
    var scrollTop = document.documentElement.scrollTop;//滚轮滑动的长度
    var pageHeight = document.documentElement.clientHeight||document.body.clientHeight;//页面高度
    //console.log(lastTopheight+":"+scrollTop+":"+pageHeight);
    //当滑到最后一张图片准备开始加载准备的图片
    //断定条件就是页面高度加上鼠标滑轮滑动大于最后一张图片距离最上面的高度（等于就是刚准备刷到最后一张照片）
    if(pageHeight+scrollTop>lastTopheight){
        return true;
    }
}

function imgLocation(parent,content){
    var cparent=document.getElementById(parent);//先得到的container节点
    var ccontent=getChildElement(cparent,content);
    //console.log(ccontent);
    var imgWidth=ccontent[0].offsetWidth;
    var WindowWidth=document.documentElement.clientWidth;
    var num=Math.floor(WindowWidth/imgWidth);//浏览器一横行所放图片的数量
    cparent.style.cssText = "width:"+Math.floor(num*imgWidth)+"px;margin:0 auto";
    // console.log(num);
    // console.log(ccontent.length);
    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);//找到数组最小的高度
            // 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 getChildElement(parent,content) {
    var allContent=[];
    allContent=parent.childNodes;//parent.getElementsByTagName("*");(注释掉的是视频中讲的)
    var contentArr = new Array();
    for(var i=0;i<allContent.length;i++){
        if(allContent[i].className==content){
            contentArr.push(allContent[i]);
        }
    }
    return contentArr;
}

function getminHeightLocation(boxHeightArr,minHeight){
    for(var i=0;i<boxHeightArr.length;i++){
        if(boxHeightArr[i]==minHeight){
            return i;
        }
    }
}

 

 

效果展现（滑轮向下滑永远滑不到尽头）：布局

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程