网页布局实例之瀑布流

1、分析一下大概思路 在外层DIV 宽950，高600，里层有四个DIV，宽230，高600，向右浮动，分别间距10像素，里层四个DIV中的每个DIV中又分别有两个div,第一个宽230，高345，第二个宽230，高245，隔一个DIV调整div的顺序，就实现了一高一矮错开的样子，形成了瀑布流效果如下图，至此，思路已经明朗，瀑布流的效果基本体现出来了，接下来用实际代码体现

4、分别设置class值为no1、no2、no3、no4的样式值<div class="pubuliu" style="width:950px; height:600px;"> <div class="no1" style="width:230px; height:600px; float:left;"></div> <div class="no2" style="width:230px; height:600px; float:left; margin-left:10px;"></div> <div class="no3" style="width:230px; height:600px; float:left; margin-left:10px;"></div> <div class="no4" style="width:230px; height:600px; float:left; margin-left:10px;"></div> </div>

6、至此，瀑布流就定位好了，我们只需要在各自地坑位里填入自己想要显示的内容就行了，如图片，文字等。