自适应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;">
现在，用户每次改变浏览器的大小，浏览器会自动刷新并重载整个脚本。
0
投稿猜你喜欢
- 使用Django中遇到这样一个需求，对一个表的几个字段做 联合唯一索引，例如学生表中 姓名和班级 2个字段在一起表示一个唯一记录。Djang
- 解决方法一: mysql安装时候的编码， 看下my.ini，有无 [mysql] default-character-set=utf8 [c
在进行增强现实的时候我们需要用到两个工具包：PyGame 和 PyOpenGL，本章在python环境下对这两个工具包的安装进行说明。一、安- 转化为Boolean类型所有JavaScript中的值都能隐式的转化为Boolean类型，比如：0 == false; // true 1
- 背景2010年, OAuth 授权规范 1.0 (rfc 5849) 版本发布, 2年后, 更简单易用的 OAuth 2.0 规范发布（rf
- 接口测试中，上传文件的测试场景非常常见。例如：上传头像（图片）、上传文件、上传视频等。下面以一个上传图片的例子为大家讲解如何通过 pytho
- 如下所示：>>> item={} ; items=[] #先声明一个字典和一个列表，字典用来添加到列表里面&g
- Python 3.10.0a2 版本已经于 2020-11-04 发布，因此我们可以窥见 Python 3.10 的一些新特性。这些新特性很
- 先给大家介绍下python pickle存储、读取大数据量列表、字典的数据针对于数据量比较大的列表、字典，可以采用将其加工为数据包来调用，减
- 本文实例为大家分享了Python实现计算器功能示例代码，供大家参考，具体内容如下1.简单计算器#计算一个表达式的时候，首先肯定是先算括号里面
- 本文实例讲述了Python多进程multiprocessing、进程池用法。分享给大家供大家参考，具体如下：内容相关：multiproces
- 这篇文章主要介绍了基于python操作ES实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- matlab中创建类似字典的数据结构Matlab中创建struct：d = struct('a','1',&
- 学会了FSO提取文件值，也学会了将信息输入到文件中，那下面就再来应用应用下。不知道你有没有这样的习惯：看到一个文件，不自觉的右键选择用记事本
- 观察一下”插入排序“：其实不难发现她有个缺点：如果当数据是”5, 4, 3, 2, 1“的时候，此时我们将“无序块”中的记录插入到“有序块”
- 用Python + PyQT写的一个系统桌面时钟，刚学习Python，写的比较简陋，但是基本的功能还可以。功能：①窗体在应用程序最上层，不用
- 加号+, 是字符串优先.并且从左向右计算. 就是运算前后两个值,只要有一个是字符串,就会将其中一个非字符串的试图转换成字符串.
- URL dispatcher简单点理解就是根据URL，将请求分发到相应的方法中去处理，它是对URL和View的一个映射，它的实现其实也很简单
- 通常在多个不等式的时候，需要分着写，比如x = 1if x>0 and x<3: print(True)但是在Python中居然
- 在windows下用python脚本实现文件的备份，参考《A Byte of Python3》第十一章（Page59）。#!/usr/bin
