瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。
基础功能实现首先我们定义好一个有 20 张图片的容器，
<body> <style> #waterfall { position: relative; } .waterfall-box { float: left; width: 200px; } </style> </body> <div id=http://www.likecs.com/"waterfall"> <img src=http://www.likecs.com/"images/1.png" class=http://www.likecs.com/"waterfall-box"> <img src=http://www.likecs.com/"images/2.png" class=http://www.likecs.com/"waterfall-box"> <img src=http://www.likecs.com/"images/3.png" class=http://www.likecs.com/"waterfall-box"> <img src=http://www.likecs.com/"images/4.png" class=http://www.likecs.com/"waterfall-box"> <img src=http://www.likecs.com/"images/5.png" class=http://www.likecs.com/"waterfall-box"> <img src=http://www.likecs.com/"images/6.png" class=http://www.likecs.com/"waterfall-box"> ... </div>