特点：等宽不等高。
实现方式：Javascript/Jquery/CSS3多栏布局。
样例网站：花瓣网-->分类
一、JS实现瀑布流
index.html:页面结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流布局</title> <link href="https://www.jb51.net/styles/layout.css"> </head> <body> <div> <div><div><img src="https://www.jb51.net/waterFall/pic/0.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/1.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/2.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/3.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/4.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/5.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/6.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/7.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/8.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/9.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/10.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/11.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/12.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/13.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/14.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/15.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/16.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/17.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/18.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/19.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/20.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/21.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/22.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/23.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/24.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/25.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/26.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/27.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/28.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/29.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/30.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/31.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/32.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/33.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/34.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/35.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/36.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/37.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/38.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/39.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/40.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/41.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/42.jpg" alt=""></div></div> <div><div><img src="https://www.jb51.net/waterFall/pic/43.jpg" alt=""></div></div> </div> <script src="https://www.jb51.net/scripts/waterfall.js"></script> </body> </html>
layout.css:页面元素样式