如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊? 类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,美丽说,以及淘宝最新上线的“哇哦” 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢。 这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。 几种实现方式随着越来越多设计师爱用这种布局,我们作为前端,要尽可能满足视觉/交互设计师的需求。所以,我们整理了下这种布局的几种实现方式,有三种: 方法一、 传统多列浮动。即 蘑菇街和哇哦 采用的方式,如下图所示:
优点:
缺点:
方法二、 CSS3 定义。W3C 中有讲述关于多列布局的文档,排列出来的样子:
优点:
缺点:
方法三、绝对定位。即 Pinterest ,Mark之,KISSY 采用的方式:
KISSY.Waterfall 实现思路KISSY 的 Waterfall 组件主要包含两个部分,一个是对现有数据块进行排列计算各自所在的位置; 二是下拉滚动时,触发加载数据操作,并把数据添加到目标容器中。 1) 数据块排列,算法步骤简述下:
2) 异步加载数据,前面讲的是如何对容器中已有元素进行排列,但很多情况下,还需要不断加载新数据块,为此专门设计了一个独立的模块 KISSY.Waterfall.Loader,其实这个功能就更简单了,仅包含两个步骤:
KISSY.Waterfall 示例和文档看到这边,是不是很想试用一下~~ 嗯嗯,这里给出一些相关学习资料和示例,以供参考:
原文链接:http://ued.taobao.com/blog/2011/09/14/waterfall/ |
瀑布流式布局浅析
最新推荐文章于 2024-08-01 15:19:04 发布