最近在慕课网上听如何实现瀑布流的效果：介绍了3种方法。
1.纯JS代码实现：
HTML代码部分：
<!DOCTYPE html> <html> <head> <title>watefall layout</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="js/waterfall.js"></script> </head> <body> <div id="main"> <div class="box"> <div class="pic"> <img src="images/0.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/1.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/2.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/3.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/4.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/5.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/6.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/7.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/8.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/9.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/10.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/11.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/12.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/0.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/1.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/2.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/3.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/4.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/5.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/6.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/7.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/0.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/1.jpg"> </div> </div> <div class="box"> <div class="pic"> <img src="images/2.jpg"> </div> </div> </div> </body> </html>