js简单瀑布流实现

什么是瀑布流
瀑布流其实就是一种布局方式，比如说有很多模块，这些模块大小不一，怎样才能把这些模块相对漂亮的排列到一起？瀑布流就可以很好地解决这个问题。首先把这些模块的宽（高）都设置一样，然后让他们像瀑布一样从上到下依次排列。如果还不清楚的话，强烈建议大家去看一下百度美女图片，用到的就是瀑布流模型。（看前请自备纸巾）。
如何实现
1、这里我们用一些图片来简单实现一下瀑布流效果。
2、html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" type="text/css" href="box.css">
    <script src="box.js"></script>
</head>
<body>
<div id="page">
    <div class="box">
        <div class="pic">
            <img src="img1/1.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/2.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/3.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/4.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/5.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/6.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/7.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/8.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/9.jpg" alt="美女">
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="img1/10.jpg" alt="美女">
        </div>
    </div>
</div>
</body>
</html>

运行一下之后，我们发现图片的排列是混乱的，一点也不美观，大小不一，然后我们用css简单布局
3、css内容

*{
    padding: 0px;
    margin: 0px;
}
#page{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.pic{
    padding: 5px;
    border: 1px solid #cccccc;
    border-radius:5px ;//设置圆角
    box-shadow: 0 0 5px #cccccc;//设置阴影效果
}
.pic img{
    width: 200px;
    height: auto;
}

在这里插入图片描述
这样就稍微好看一点了，大家可以把图片多复制一些不然出不来滚动条图片
但是我们会发现一些问题

第二行的第一张图片并没有在第一列最低的那张图片下面
图片会随着浏览器宽度改变而自动向下排列
当滚动条滑到底时图片不能自动加载

这和我们的浮动设置和图片来源有关系，那怎样才能解决这些问题呢，请看以下代码这和我们的浮动设置和图片来源有关系，那怎样才能解决这些问题呢，请看以下代码
3、js内容

window.onload=function () {//当网页加载完执行
    imgCount("page","box");
    var imgDate={"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"}]}
    window.onscroll=function () {//滑动滚动条执行
        if(check("page","box"))
        {
            var cparent=document.getElementById("page");
            for(var i=0;i<imgDate.data.length;i++)
            {
                var cBox=document.createElement("div");
                cBox.className="box";
                cparent.appendChild(cBox);
                var cimg=document.createElement("div");
                cimg.className="pic";
                cBox.appendChild(cimg);
                var imga=document.createElement("img");
                imga.src="img1/"+imgDate.data[i].src;
                cimg.appendChild(imga);
               // imgCount("page","box");
            }
            imgCount("page","box");
        }

    }
}
function check(parent,content) {//检查是否滑到了底部
    var cparent=document.getElementById(parent);
    var cchild=getChild(parent,content);
    var lastHeight=cchild[cchild.length-1].offsetTop;
    var scroolHeight=document.documentElement.scrollTop;
    var screenHeight=document.documentElement.clientHeight;
    if(lastHeight<screenHeight+scroolHeight)
    {
        return true;
    }
}
function imgCount(parent,content){//得到一行的图片数量，并依次放置图片
    var cparent=document.getElementById(parent);
    var cchild=getChild(parent,content);
    var imgWidth=cchild[0].offsetWidth;
     var cols=Math.floor(document.documentElement.clientWidth/imgWidth);
     cparent.style.cssText="width:"+cols*imgWidth+"px;margin:0 auto";

     var contentHeight=[];
     for(var i=0;i<cchild.length;i++)
    {
        if(i<cols)
        {
            contentHeight[i]=cchild[i].offsetHeight;
        }
        else{
            var minheight=Math.min.apply(null,contentHeight);
            var minIndex=minLocation(minheight,contentHeight);
            cchild[i].style.position="absolute";
            cchild[i].style.top=minheight+"px";
            cchild[i].style.left=cchild[minIndex].offsetLeft+"px";
            contentHeight[minIndex]=contentHeight[minIndex]+cchild[i].offsetHeight;
        }
    }
}
function minLocation(minheight,contentHeight) {//返回当前最低图片索引
    for(var i=0;i<contentHeight.length;i++)
    {
        if(contentHeight[i]==minheight)
        {
            return i;
        }
    }

}
function getChild(parent,content) {//得到所有图片
    var contentArr=[];
    var allContent=document.getElementsByTagName("*");
    for(var i=0;i<allContent.length;i++)
    {
        if(allContent[i].className==content)
        {
            contentArr.push(allContent[i]);
        }
    }
    return contentArr;
}

最后就完成了简单的瀑布流布局

在这里插入图片描述

js简单瀑布流实现

猜你喜欢