瀑布流布局浅析
作者:乔花 时间:2011-09-16 20:18:09
简介
如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊?
类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢。
这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。
几种实现方式
随着越来越多设计师爱用这种布局,我们作为前端,要尽可能满足视觉/交互设计师的需求。所以,我们整理了下这种布局的几种实现方式,有三种:
1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式,如下图所示:
各列固定宽度,并且左浮动;
一列中的数据块为一组,列中的每个数据块依次排列即可;
更多数据加载时,需要分别插入到不同的列上;
线上例子。
优点:
布局简单,应该说没啥特别的难点;
不用明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。
缺点:
列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;
滚动加载更多数据时,还要指定插入到第几列中,还是不方便。
标签:布局,瀑布流,淘宝
0
投稿
猜你喜欢
经验之谈:MySQL与ASP.NET配合更强大
2008-12-23 15:26:00
asp长文章分页显示思路
2007-08-23 13:54:00
JS代码的格式化和压缩
2007-10-17 21:17:00
典型的三行二列居中高度自适应css布局
2008-02-22 16:02:00
從無到有實現一個xml數據庫登錄驗証
2008-09-05 17:12:00
CSS的另类拼图___减少HTTP请求
2009-05-28 19:05:00
细线表格的处理
2008-08-06 12:53:00
XML简易教程之一
2008-09-05 17:19:00
ASP下批量删除数据的两种方法
2011-02-05 11:01:00
简单的XML操作:XML文件创建
2008-04-25 10:31:00
深入认识javascript中的eval函数
2008-08-03 16:44:00
asp加载access数据库并生成XML文件范例
2008-07-22 12:41:00
一列保存多个ID(将多个用逗号隔开的ID转换成用逗号隔开的名称)
2012-08-21 10:37:37
asp随机生成文件名的函数
2009-02-11 13:41:00
asp使用模板生成静态页面方法详解
2007-09-24 12:29:00
SQL Server 2008中有关XML的新功能
2008-06-04 12:57:00
如何修改Linux的下MySQL 5.0的默认连接数
2012-01-29 18:07:04
如何往SQL Server数据库传递日期数据?
2010-06-08 09:29:00
使用css给图片添加阴影入门篇
2009-07-06 14:38:00
asp #include file 与 #include virtual 的区别小结第1/2页
2011-04-02 11:17:00