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

效果图如下：

其实每一行六个图片不是固定的，当你缩小窗口时，它会成为两列，或者三列四列。但我们为了以后的布局，就将它设置为固定的列数，即根据窗口的大小除以图片的大小，向下取整。

接下来写的是js实现的瀑布流布局。
在写代码之前，由于要用到box属性，而js中没有直接定义获得class的方法，所以我们在这儿要写一个获得class的方法：

两个参数分别是父元素和要查找的classname。

接下来写函数：