瀑布流布局浅析
作者:乔花 发布时间:2011-09-16 20:18:09
标签:布局,瀑布流,淘宝
简介
如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊?
类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网,以及淘宝最新上线的“哇哦” 等等,倒是很流行哈~ 在淘宝即将上线的众多产品中,你还会大量看到这样的形式呢。
这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。所以,我们给这样的布局起了一个形象的名字 — 瀑布流式布局。
几种实现方式
随着越来越多设计师爱用这种布局,我们作为前端,要尽可能满足视觉/交互设计师的需求。所以,我们整理了下这种布局的几种实现方式,有三种:
1) 传统多列浮动。即 蘑菇街和哇哦 采用的方式,如下图所示:
各列固定宽度,并且左浮动;
一列中的数据块为一组,列中的每个数据块依次排列即可;
更多数据加载时,需要分别插入到不同的列上;
线上例子。
优点:
布局简单,应该说没啥特别的难点;
不用明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。
缺点:
列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;
滚动加载更多数据时,还要指定插入到第几列中,还是不方便。
0
投稿
猜你喜欢
- 老外真是聪明,这个方法也想得到,有兴趣的不妨试试,但是如果对方的服务器安全搞的很好的话,这个代码也许就不能用了,但不管怎么样,学习一下也是好
- 2008北京奥运会块到了,下面的js代码将告诉你,离奥运会开幕还要多少天!让我们一起迎接这美好的时刻。相关文章推荐:各种北京2008奥运会倒
- 主键的生成方式主要有三种: 一. 数据库自动生成 二. GUID 三. 开发创建 严格讲这三种产生方式有一定的交叉点,其定位方式将在下面进行
- Yahoo发布了一款基于FireFox的插件,名叫YSlow,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优
- 描述的意思是HTML为中心的前端开发也差不多是web标准的意思。1.HTML是基础2.CSS依靠选择符提供视觉;3.Javascript 依
- 一、概述 对象是Oracle8i以上版本中的一个新的特性,对象实际是对一组数据和操作的封装,对象的抽象就是类。在面向对象技术中,对象涉及到以
- 采用双重循环。把图片进行“.”分割后名字问前面部分,那其余数据库中的 图片路径记录进行对比 采用vb的InStr函数 如果存在的话返回值&g
- javascript可以根据输入值自动搜索显示相关的select列表,对于列表很长时可以很方便的查找到要的值。js代码:<script
- 以前在工作中遇到一个问题,当表单发送的数据量很大时,就会报错。查阅MSDN了解到,原因是微软对用Request.Form()可接收的最大数据
- Oracle :NvlNVL函数:NVL函数是将NULL值的字段转换成默认字段输出。NVL(expr1,expr2)expr1,需要转换的字
- SQLserver 2000中出现“指定的服务并未以已安装的服务存在" 解决方案一、将计算机名改成大写。二、将sql server
- 一个动态数组 a,如果你已经使用redim 语句给它设定了大小,那么在此之后使用 ubound(a) 就可以得到它的上边界。如果你没有使用
- <% '****************************** '函数:Chec
- 这些包可以独立使用,也可以与其他包一起使用以满足复杂的业务需求。Integration Services 可以提取和转换来自多种源(如 XM
- 用IIS调试ASP程序时,有的页面可以显示出错行及出错原因,虽然原因不是很具体但足以引导调试程序,但有些时候就直接出现:HTTP 500 -
- (一)连接连接通常来自Web服务器,下面列出了一些与连接有关的参数,以及该如何设置它们。1、max_connections这是Web服务器允
- CSS布局中可以用javascript判断浏览器版本看如下的javascript脚本: if (window.XMLHt
- 各种asp字符串处理函数,包括:把字符串换为char型数组,把一个数组转换成一个字符串,检查源字符串str是否以chars开头,检查源字符串
- <script type="text/javascript"> var params&n
- 最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 da