[JS练习] 瀑布流照片墙

时间：2022-08-22 11:02:56

记录JS实现瀑布流照片墙效果

首先是前端页面

[JS练习] 瀑布流照片墙[JS练习] 瀑布流照片墙
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" type="text/css" href="js瀑布流.css">
    <script type="text/javascript" src="js瀑布流.js"></script>
</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 class="box">
        <div class="box_img">
            <img src="img/6.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/7.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/8.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/9.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/10.jpg"/>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/11.jpg"/>
        </div>
    </div>

</div>
</body>
</html>
View Code

接下来是样式

[JS练习] 瀑布流照片墙[JS练习] 瀑布流照片墙
*{
    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;
}
View Code

最后是最主要的JS代码

加载图片

[JS练习] 瀑布流照片墙[JS练习] 瀑布流照片墙
function imgLocation(parent,content){
    var cparent=document.getElementById(parent);
    var cconten=getChildElement(cparent,content);//得到所有子节点
    var imgWidth=cconten[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<cconten.length;i++){
        if (i<cols) { //如果是第一排 ,cols为一排能放图片的个数
            boxHeightArr[i]=cconten[i].offsetHeight;
        }
        else{ //找到第一排最小图片的高度
        var minHeight=Math.min.apply(null,boxHeightArr)//最小图片的高度
        var minIndex= getminHeightLocation(boxHeightArr,minHeight);
         cconten[i].style.position="absolute";
         cconten[i].style.top=minHeight+"px";
         cconten[i].style.left=cconten[minIndex].offsetLeft+"px";
         boxHeightArr[minIndex]=boxHeightArr[minIndex]+cconten[i].offsetHeight;//把当前最小的高度加上当前追加图片的高度
        }
    }

}
View Code

获得子节点

[JS练习] 瀑布流照片墙[JS练习] 瀑布流照片墙
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;
}
View Code

得到最小高度图片的位置

[JS练习] 瀑布流照片墙[JS练习] 瀑布流照片墙
function getminHeightLocation(boxHeightArr,minHeight) {
    for(var i in boxHeightArr){
        if(boxHeightArr[i]==minHeight){
            return i;
        }
    }
}
View Code

判断是否需要加载

[JS练习] 瀑布流照片墙[JS练习] 瀑布流照片墙
function checkFlag(){
    var cparent=document.getElementById("container");
    var cconten=getChildElement(cparent,"box");
    var lastContentHeight=cconten[cconten.length-1].offsetTop; //最后一张图片距顶部的高度
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//当前滚动距顶部的高度
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//当前页面的高度
    if(lastContentHeight<scrollTop+pageHeight){
        return true;
    }
    
}
View Code

页面加载完触发

[JS练习] 瀑布流照片墙[JS练习] 瀑布流照片墙
window.onload=function(){
    imgLocation("container","box")
    var imgData={'data':[{'src':'92.jpg'},{'src':'16.jpg'},{'src':'17.jpg'},{'src':'18.jpg'}]};
    //鼠标滚动事件
    window.onscroll=function(){
        if(checkFlag()){ //是否需要加载图片
            var cparent=document.getElementById("container");
            for(var i=0;i<imgData.data.length;i++){
                var cconten=document.createElement("div");
                cconten.className="box";
                cparent.appendChild(cconten);
                var boximg=document.createElement("div");
                boximg.className="box_img";
                cconten.appendChild(boximg);
                var img=document.createElement("img");
                img.src="img/"+imgData.data[i].src;
                boximg.appendChild(img);
            }
            imgLocation("container","box")
        }
    }
}
View Code

 

标签：

相关文章