JS瀑布流

最新推荐文章于 2023-12-26 15:09:23 发布

原创最新推荐文章于 2023-12-26 15:09:23 发布 · 476 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #JS #HTML5

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的瀑布流布局方法，并提供了完整的代码示例，包括HTML结构、CSS样式和JS逻辑，适用于动态加载图片场景。

这段事件找工作，闲暇也在学习一下HTML5不学习就要被时代淘汰啊！这里呢是一个JS瀑布流的Demo 首先创建一个index.js的文件然后添加

window.onload=function(){
    var imgData={"data":[{"src":"1.jpg"},{"src":"2.jpg"},
        {"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},
        {"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"}]}
    addImag(imgData);
    addImag(imgData);
    addImag(imgData);
    window.onscroll=function(){//监听滚动条
        if(checkFlag()){
            addImag(imgData);
        }
    }
}

//动态添加图片
function addImag(imgData){
    var cparent=document.getElementById("contd");
    for(var i=0;i<imgData.data.length;i++){
        var ccontent=document.createElement("div");//动态创建div
        ccontent.className="whdi";//指定class
        cparent.appendChild(ccontent);//加载根视图创建子节点
        var boximg=document.createElement("div");//动态创建div
        boximg.className="txid";//指定class
        ccontent.appendChild(boximg);//加载根视图创建子节点
        var img=document.createElement("img");
        img.src="img/"+imgData.data[i].src;//加载src数据
        boximg.appendChild(img);
    }
    imgLocation("contd","whdi")
}

function checkFlag(){//是否允许加载
    var cparent=document.getElementById("contd");//得到父级控件
    var ccontent=getChildElement(cparent,"whdi");//得到每一个控件
    var lastContentHeight=ccontent[ccontent.length-1].offsetTop;//最后一张图片距顶部的高度
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//未显示部分的高度
    var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;//页面高度
    //console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
    if(lastContentHeight<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 num=Math.floor(document.documentElement.clientWidth/imgWidth);//得到每行显示图片数量
    cparent.style.cssText="width:"+imgWidth*num+"px;margin:0 auto";//固定显示位置

    var BoxHeightArr=[];//承载数组高度
    for(var i=0;i<ccontent.length;i++){
        if(i<num) {//第一排具体图片数
            BoxHeightArr[i] = ccontent[i].offsetHeight;//存储每一个图片的高度
        }else{
            var minheigh=Math.min.apply(null,BoxHeightArr);//数组中的最小高度
            var minIndex= getminheightLocation(BoxHeightArr,minheigh);//得到最小高度的位置
            ccontent[i].style.position="absolute";//设置布局绝对位置
            ccontent[i].style.top=minheigh+"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;
}

方法在这，注释我也写的挺清楚的

然后再添加的CSS

*{
    padding: 0px;
    margin: 0px;
}
#contd{

}
.whdi{
    padding: 5px;
    float: left;
}
.txid{
    padding: 5px;
    border: 1px solid #cccccc;
    border-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.whdi img{
    width: 270px;
    height: auto;
}

添加HTML文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/index.css" rel="stylesheet" type="text/css"/>
    <script src="js/index.js"></script>
</head>
<body>
    <div id="contd">
        <div class="whdi">
            <div class="txid">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/2.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/7.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/8.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/9.jpg">
            </div>
        </div>
        <div class="whdi">
            <div class="txid">
                <img src="img/10.jpg">
            </div>
        </div>
    </div>
</body>
</html>