一、前言:

  瀑布流现在是一个非常常用的布局方式了,尤其在购物平台上,例如蘑菇街,淘宝等等。

 

二、流程:

      1、在html文件中写出布局的元素内容;

      2、在css文件中整体对每一个必要的元素进行样式和浮动设置;

      3、在js文件中动态实现布局,每一个滚动时,都要刷新布局。

 

三、思想:

     实现瀑布流,就是每次当前一列的图片显示完全后,接着要显示下一列时,先找出最短的一列,然后将图片填充上,以此类推...

 

四、代码:

 waterFlow.html:

JavaScript:实现瀑布流 View Code

 waterFlow.css:

JavaScript:实现瀑布流 View Code

 waterFlow.js:

JavaScript:实现瀑布流 View Code

 

五、效果图:JavaScript:实现瀑布流

 

源码:http://files.cnblogs.com/files/XYQ-208910/waterFlow.zip

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5896137.html,如需转载请自行联系原作者

相关文章: