利用JavaScript实现瀑布流布局的效果代码

来源：动视网责编：小OO 时间：2020-11-27 20:22:54

利用JavaScript实现瀑布流布局的效果代码

先说一下什么是瀑布流布局。就是一堆等宽不等高的数据块组成的页面，如图。现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。首先要实现它就要明白它是怎样排列的。每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。首先实现框架。

推荐度：

点击下载本文 文档为doc格式

导读先说一下什么是瀑布流布局。就是一堆等宽不等高的数据块组成的页面，如图。现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。首先要实现它就要明白它是怎样排列的。每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。首先实现框架。

这篇文章主要为大家详细介绍了JavaScript瀑布流布局的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先说一下什么是瀑布流布局。

就是一堆等宽不等高的数据块组成的页面，如图：

现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。
首先要实现它就要明白它是怎样排列的。
每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。
第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。

首先实现框架。

<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>

效果图如下：