瀑布流布局浅析.pdf

瀑布流布局浅析 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 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 示例和文档 看到这边，是不是很想试用一下 ~~ 嗯嗯，这里给出一些相关学习资料和示例，以供参考 : 欢迎试用和提出意见 ~~ 来源： /blog/2011/09/14/waterfall/ 人人都是产品经理（ ）中国最大最活跃的产品经理学习、交流、分享平台