时间：2021-07-01 10:21:17 帮助过：8人阅读
先说一下什么是瀑布流布局。
就是一堆等宽不等高的数据块组成的页面，如图：
现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。
首先要实现它就要明白它是怎样排列的。
每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。
第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。
首先实现框架。
<p id = "main"> <p class = "box"> <p class = "pic"> <img src = "images/0.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/1.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/2.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/3.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/4.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/5.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/6.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/7.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/8.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/9.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/10.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/11.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/12.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/13.jpg"> </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/14.jpg"> </p> </p> </p>
这里定义了14个图片，每个图片都被一个class= box的属性和class= “pic”的属性包裹，在css中定义其样式：
*{
padding: 0px;
margin: 0px;
}
#main{
position: relative;
}
.box{
/* display: inline-block;*/
padding: 15px 0px 0px 15px;
float: left;
}
.pic{
padding: 10px;
border-radius: 5px;
border:1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}
</style>效果图如下：
其实每一行六个图片不是固定的，当你缩小窗口时，它会成为两列，或者三列四列。但我们为了以后的布局，就将它设置为固定的列数，即根据窗口的大小除以图片的大小，向下取整。
接下来写的是js实现的瀑布流布局。
在写代码之前，由于要用到box属性，而js中没有直接定义获得class的方法，所以我们在这儿要写一个获得class的方法：
两个参数分别是父元素和要查找的classname。
接下来写函数：
以上就是完整的瀑布流布局的js实现代码。效果图如下：
附上源代码：
js代码：
html以及css代码：
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<script src = "./jswaterfll.js"></script>
<title>瀑布流布局</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#main{
position: relative;
}
.box{
/* display: inline-block;*/
padding: 15px 0px 0px 15px;
float: left;
}
.pic{
padding: 10px;
border-radius: 5px;
border:1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}
</style>
</head>
<body>
<p id = "main">
<p class = "box">
<p class = "pic">
<img src = "images/0.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/1.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/2.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/3.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/4.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/5.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/6.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/7.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/8.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/9.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/10.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/11.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/12.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/13.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/14.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/15.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/16.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/17.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/18.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/19.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/20.jpg">
</p>
</p>
<p class = "box">
<p class = "pic">
<img src = "images/21.jpg">
</p>
</p>
</p>
</body>
</html>【相关推荐】
1. 免费js在线视频教程
2. JavaScript中文参考手册
3. php.cn独孤九贱（3）－JavaScript视频教程
以上就是利用JavaScript实现瀑布流布局的效果代码的详细内容，更多请关注Gxl网其它相关文章！