首页 > 网页教程 > CSS > 网页瀑布流布局的几种实现方式分析

网页瀑布流布局的几种实现方式分析

时间:2012-01-18    来源:TaobaoUED

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

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

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

几种实现方式

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

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

各列固定宽度,并且左浮动;

一列中的数据块为一组,列中的每个数据块依次排列即可;

更多数据加载时,需要分别插入到不同的列上;

线上例子。

优点:

布局简单,应该说没啥特别的难点;

不用明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。

缺点:

列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;

滚动加载更多数据时,还要指定插入到第几列中,还是不方便。

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

由 chrome/ff 浏览器直接渲染出来,可以指定容器的列个数,列间距,列中间边框,列宽度来实现;

#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;*/
}

column-count 为列数; column-gap 为每列间隔距离; column-rule 为间隔边线大小; column-width 为每列宽度; 当只设置 column-width 时,浏览器窗口小于一列宽度时,列中内容自动隐藏; 当只设置 column-count 时,平均计算每列宽度,列内内容超出则隐藏; 都设了 column-count 和column-width,浏览器会根据 count 计算宽度和 width 比较,取大的那个值作为每列宽度,然后当窗口缩小时,width 的值为每列最小宽度。这边其实很简单,简易自己尝试下,详细可参考https://developer.mozilla.org/en /CSS3_Columns 中的说明。

线上列子。

相关推荐
瀑布流布局:用CSS+DIV等宽格子堆砌瀑布流效果
8个国外网页瀑布流布局主题欣赏及其做法揭秘(附下载)
瀑布流布局插件masonry在IE6下BUG的解决方案
什么是响应式网页设计?响应式布局的实现原理
10款提升工作效率的响应式页面设计工具推荐
CSS创建复杂布局的利器—Flexible Box Model
11个精美的CSS网页字体设计工具和教程分享
20个免费CSS框架推荐 网页设计web开发必备
9种网页设计有用的CSS3属性和使用技巧
8个超棒的创建响应式网页设计框架推荐
8款网页前端开发有用的优秀CSS工具分享
17款超棒的前端开发响应式开发框架推荐

分类导航

教程推荐

热门特效

热门教程