余果的博客

瀑布流介绍

Introduction

user

余果

一个产品设计师。了解详情


Featured

瀑布流介绍

余果 front-end

关于瀑布流

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

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

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

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

  1. masonry
  2. KISSY的Waterfall组件

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

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

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

我写字的地方迁移到公众号啦~欢迎关注我的公众号:余果专栏

user

余果

一个产品设计师。 了解详情