Yuguo.us

瀑布流介绍

Introduction

user

余果

全栈工程师,《Web全栈工程师的自我修养》作者。


Featured

front-end

瀑布流介绍

Posted by 余果 on .

关于瀑布流

最近几个月突然流行一种布局方式——瀑布流。

比如最早的 Pinterest,然后国内的33号铺Mark之蘑菇街,还有Qzone的好友相册,以及淘宝最新上线的“哇哦” 等等,都是采用这种布局方法。 Pinterest瀑布流布局 兼容性较强的实现方法有两种,taobaoUED有介绍

  1. N列布局方法
  2. 绝对定位方法

推荐使用绝对定位方法,那么如何使用绝对定位呢?有两个js库值得推荐。

  1. masonry
  2. KISSY的Waterfall组件

masonry提供的定位参数更多,包括流式布局、居中、图片lazyload、jQuery动画、在瀑布流中定位一个区域(放广告)等。

KISSY更轻便,而且还多了一个专门异步加载的class。

二者各有所长,根据自己的需要选择一个即可,用法也很简单,看看API和demo就可以了。

user

余果

https://yuguo.us

全栈工程师,《Web全栈工程师的自我修养》作者。