关于Javascrip瀑布流深度解析

1 基本布局

html

<div id="container">
    <div class="box">
        <div class="box_img">
            <img src="img/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="img/2.jpg">
        </div>
    </div>
</div>

css

*{
    margin: 0px;
    padding: 0px;
}
#container{
    margin:0 auto;position:relative;
}
.box{
    float:left;padding: 5px;
}
.box_img{
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #cccccc;
    border-radius: 5px;
    padding: 5px;
}
.box_img img{
    150px;height: auto;
}

　　在上面代码中box为每一张的图片的容器，box_img为画框。在外层用container来容纳所有图片。

2 使用Javascript实现图片的瀑布流效果

　　　在通过上面布局之后我们可以看到图片的有序排列，但是我们看到在图片之间有很多的空白的地方。所有在这里我们就要使用Javascript来实现瀑布流效果，让图片自动充满这些空白的地方。因为我们限制了每张图片的宽度，