关于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{ width:150px;height: auto; }
在上面代码中box为每一张的图片的容器,box_img为画框。在外层用container来容纳所有图片。
2 使用Javascript实现图片的瀑布流效果
在通过上面布局之后我们可以看到图片的有序排列,但是我们看到在图片之间有很多的空白的地方。所有在这里我们就要使用Javascript来实现瀑布流效果,让图片自动充满这些空白的地方。因为我们限制了每张图片的宽度,