瀑布流布局浅析
作者:乔花 时间:2011-09-16 20:18:09
简介
如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊?
类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢。
这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。
几种实现方式
随着越来越多设计师爱用这种布局,我们作为前端,要尽可能满足视觉/交互设计师的需求。所以,我们整理了下这种布局的几种实现方式,有三种:
1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式,如下图所示:
各列固定宽度,并且左浮动;
一列中的数据块为一组,列中的每个数据块依次排列即可;
更多数据加载时,需要分别插入到不同的列上;
线上例子。
优点:
布局简单,应该说没啥特别的难点;
不用明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。
缺点:
列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;
滚动加载更多数据时,还要指定插入到第几列中,还是不方便。
标签:布局,瀑布流,淘宝
0
投稿
猜你喜欢
mysql myisam 优化设置
2010-03-25 10:18:00
使用Python实现火车票查询系统(带界面)
2022-04-26 04:14:47
Go语言 go程释放操作(退出/销毁)
2023-09-17 22:03:42
python爬取梨视频生活板块最热视频
2023-12-30 09:38:56
python实现中文文本分句的例子
2023-02-15 12:16:24
Python实现mysql数据库更新表数据接口的功能
2024-01-18 01:07:43
改进SQL Server数据库系统安全五步走
2009-01-20 11:47:00
ASP中页面限权访问的几种方法
2007-12-13 06:53:00
Python区块链Creating Miners教程
2021-03-25 11:39:27
JavaScript简单编程实例学习
2024-04-29 13:24:52
MySQL5.6基本优化配置
2024-01-26 07:31:15
python中的随机函数小结
2021-07-01 04:26:59
MySQL忘记密码恢复密码的实现方法
2024-01-19 08:55:14
GO项目配置与使用的方法步骤
2024-05-22 17:45:57
isset和empty的区别
2023-11-20 12:24:08
Delphi 本地路径的创建、清空本地指定文件夹下的文件
2023-06-23 19:49:20
python smtplib发送带附件邮件小程序
2023-03-24 17:14:26
PHP图像识别技术原理与实现
2024-06-05 09:43:54
ASP 支持中文的len(),left(),right()的函数代码
2011-03-03 10:59:00
mac os10.12安装mysql5.7.18教程
2024-01-19 14:08:27