首页 > 教程 > 网页教程 > html+css >

瀑布流布局浅析

时间:2011-11-14 09:51  来源:ued.taobao.com  作者:乔花

简介

如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊?

类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之蘑菇街点点网,以及淘宝最新上线的“哇哦” 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢。

这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 ― 瀑布流式布局

几种实现方式

随着越来越多设计师爱用这种布局,我们作为前端,要尽可能满足视觉/交互设计师的需求。所以,我们整理了下这种布局的几种实现方式,有三种:

1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式,如下图所示:

优点:

缺点:

2) CSS3 定义。W3C 中有讲述关于多列布局的文档,排列出来的样子:

    #container {        -webkit-column-count: 5;        /*-webkit-column-gap: 10px;        -webkit-column-rule: 5px solid #333;        -webkit-column-width: 210px;*/        -moz-column-count: 5;        /*-moz-column-gap: 20px;        -moz-column-rule: 5px solid #333;        -moz-column-width: 210px;*/        column-count: 5;        /*column-gap: 10px;        column-rule: 5px solid #333;        column-width: 210px;*/    }

优点:

缺点:

3) 绝对定位。即 Pinterest ,Mark之,KISSY 采用的方式:

缺点:

KISSY.Waterfall 实现思路

KISSY 的 Waterfall 组件主要包含两个部分,一个是对现有数据块进行排列计算各自所在的位置; 二是下拉滚动时,触发加载数据操作,并把数据添加到目标容器中。

1) 数据块排列,算法步骤简述下:

2) 异步加载数据,前面讲的是如何对容器中已有元素进行排列,但很多情况下,还需要不断加载新数据块,为此专门设计了一个独立的模块 KISSY.Waterfall.Loader,其实这个功能就更简单了,仅包含两个步骤:

KISSY.Waterfall 示例和文档

看到这边,是不是很想试用一下~~ 嗯嗯,这里给出一些相关学习资料和示例,以供参考:

源文:http://ued.taobao.com/blog/2011/09/14/waterfall/

猜你感兴趣

最新文章

相关文章

猜你喜欢