自适应css布局——流动布局新时代[译](5)
作者:dishuipiaoxiang 来源:蓝色理想 发布时间:2009-08-13 12:28:00
四、jQuery圬工
不去考虑不断改变屏幕分辨率时css中的存在的许多问题。倒有一个共同的问题是许多设计师更可能面临的--多重内容盒子。当有许多浮动元素时,一些尴尬的空白会出现在高度变换的区域之间,下面是这方面的一个例子:
如果我们打算在一个固定宽度的布局中使用多个div,固定很容易:只需调整所有div在合适的位置就行,在流动设计中用这种方式处理多个divs似乎不可能。布局的每一次调整,在新的点上将出现不同数量的空白。
在较小分辨率下查看相同的布局,布局变成了两栏。但是,在这种情况下,我们得了不同的空白。任何设计师觉得这是一个尴尬的问题。通常情况下,因为没有可行方案解决此问题,这种布局被强行设置成固定宽度。
幸运的是,这个问题不是不可能解决,而是相当容易--源于 David DeSandro’s jQuery Plugin: jQuery Masonry 提供的方法。
jQuery圬工是什么?
jQuery圬工是一个非常容易使用的插件,用David DeSandro 自己的话说:“将jQuery看作css浮动的对立面,浮动元素的排列是先横向后纵向,圬工排列是先纵向后横向,其结果是在高度变换元素的垂直方向上没有间隙,就像是一座石头强。”
如何使用jQuery masonry
在上面的例子中,所有盒子被放置在 ID为“item”的段落之中,“item”设置了30%的宽度,并向左浮动,所有这些放置在宽度为90%的# wrapper中,一旦段落的宽度达到#wrapper的宽度,无论是否有空白留下,它将新起一行。
下载 jQuery Masonry 插件,并对#wrapper应用masonry()方法,就很容易修复它。
$('#wrapper').masonry();
下面两张图片显示了该插件的力量。第一个是在大分辨率屏幕上的布局情况,第二个是同样的布局,在小分辨率屏幕中查看,它折叠成了两栏。
该插件的一个bug和一个修复方法
使用该插件,如果用户缩放浏览器,你会注意到div层保持在原来的位置,但是刷新后,它有完好。但用户不知道需要书信去修复该问题。因此,按下面的方法改变html代码将很容易的修复该问题。
<body onresize="window.location=window.location;">
现在,用户每次改变浏览器的大小,浏览器会自动刷新并重载整个脚本。
猜你喜欢
- <%DIM LinkArray(4,2)' 定义链接数组LinkArray(0,1)=&quo
- 现将几种主要情况进行小结: 一、如何输入NULL值 如果不输入null值,当时间为空时,会默认写入"1900-01-01"
- 1. 什么是存储过程?存储过程是SQL server所提供的Tran
- 许多服务器管理员都知道,MySQL数据库管理系统(RDBMS)是高度灵活的软件块,带有范围广阔的启动选项,可以用来修改相关行为。然而,大部分
- asp之家注:那么为什么要使用分页呢?当记录不多的时候,如10个或20个,我们可以也没必要使用分页来显示数据,但是数据是在不断增加的,当到了
- 安装 SQL2000 时,系统经常会提示:操作被挂起,要求重新启动计算机,如图1: 图1重新启动后,再次安装时问题仍然存在。解决办
- Function getIpvalue(clientIP)'得到客户端的IP转换成长整型,返回值getIpvalue&nb
- 修改MySQL下的默认mysql数据库的user表,删除所有host为localhost记录,另外添加一些其他记录,重新启动MySQL服务器
- 大家都熟悉迅雷看看里面的电影人气指数这个小图标吧先看看我的效果图再看看迅雷的截图比较好看,是根据电影的人气指数来显示热度,下面我们就来模仿一
- 从98年某月某日我的第一个个人猪页诞生.到2008年的今天.宣告了我从事设计行业整整十年.十年,很多变化,从摆弄个人猪页到现在以做设计为生,
- 在第一章,我们讲过position,当它取值absolute的时候,即绝对定位。既然是定位,就要有参照物。一般来讲,这个定位的参照物是bod
- MySQL使用环境变量TMPDIR的值作为保存临时文件的目录的路径名。如果未设置TMPDIR,MySQL将使用系统的默认值,通常为/tmp、
- 如果需要在查询语句返回的列中包含一列表示该条记录在整个结果集中的行号, ISO SQL:2003 标准提出的方法是提供 ROW_NUMBER
- --语 句 功 能 --数据操作 SELECT --从数据库表中检索数据行和列 INSERT --向数据库表添加新数据行 DELETE --
- 我们平日办公时用得最多的软件是Execl、Word或WPS Office等,你的计算机中一定储存着大量的XLS、DOC、WPS文件吧!网页制
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 18 - Classes part IClass(
- 内容摘要:本文是一篇实例讲解的文章。作为一个普通的程序员,我深知,一个优秀的例程,对于正在学习编程的人是多么的有帮助。本文中使用的例程,是一
- 互联网的真正算得上成功的产品屈指可数,每年都有成千上万个新网站出现,同时也有成千上万的网站死去,而那些算得上成功的产品,无不是从这些尸骨堆里
- SQL Server 2005相对于SQL Server 2000做了很大的改进,许些新特性是非常实用的。本文中将通过几个具体示例进行详细的
- 读《论语》,子张十九,子夏曰:博学而笃志,切问而近思,仁在其中矣。 博学:架构需要广度,要尽量多学习各方面的知识。笃志:除了广度,架构师还需