CN103699608A - 页面布局方法及装置 - Google Patents

Abstract

本发明公开了一种页面布局方法及装置，方法包括步骤：将页面中的栅格区域划分为若干个单元区域；针对划分出的每一单元区域，重复执行下述操作，直至该单元区域中不存在未被占用的栅格：从待布局的页面元素中提取出一个页面元素，并确定该页面元素在该单元区域中实际占用的栅格的数目；根据所述实际占用的栅格的数目、每个栅格的宽度、每个栅格的高度以及栅格之间的间隙，确定该页面元素布局后的实际尺寸；根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，并将缩放处理后的页面元素布局到该单元区域中。采用本发明技术方案，能够解决现有技术中页面布局的灵活性较差的问题。

Description

页面布局方法及装置

技术领域

本发明涉及网页版面设计领域，尤其涉及一种页面布局方法及装置。

背景技术

现有技术中，通常使用栅格系统来实现网页版面的设计，栅格系统的作用主要为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。对于网页版面设计来说，栅格系统的使用不仅可以让网页的信息呈现更加美观易读，更具可用性，而且对于前端开发来说，网页将更加的灵活与规范。

下面介绍现有技术中使用栅格系统设计网页页面的具体原理。

若页面中的栅格区域的宽度为W，则在进行页面布局时，首先将栅格区域划分为各栅格，每行包含N个栅格，如图1所示，每个栅格的宽度为a，栅格与栅格之间的间隙为i，栅格a和间隙i组成栅格单元A，即A=a+i，其中，a、i、A均为正整数，其单位为像素（pixel，px）。

由图1可知，页面中的栅格区域的宽度可以由下述公式（1）表示：

W=a×N+(N-1)×i   （1）

由于A=a+i，则可得到下述公式（2）：

W=A×N-i   （2）

按照上述方式得到各栅格后，在布局页面时，每个页面元素的宽度应为A×n+a，其中n为自然数。

现有技术在布局页面时，可以将各页面元素按照统一的大小和间距进行布局，也就是说，各页面元素所占用的栅格的数量相等，但是这种布局方式效果较差。为了实现使各页面元素呈现错落式布局，现有技术一般由设计人员预先设定每个页面元素的尺寸，然后按照各页面元素的尺寸进行布局，但是这样就会耗费较多的人工成本，且当栅格区域的尺寸发生变化时，也需要重新设计各页面元素的尺寸，使得页面布局的灵活性较差。

发明内容

本发明实施例提供一种页面布局方法及装置，用以解决现有技术中页面布局的灵活性较差的问题。

本发明实施例技术方案如下：

本发明实施例提供一种页面布局方法，该方法包括：

将页面中的栅格区域划分为若干个单元区域；

针对划分出的每一单元区域，重复执行下述操作，直至该单元区域中不存在未被占用的栅格：

从待布局的页面元素中提取出一个页面元素，并确定该页面元素在该单元区域中实际占用的栅格的数目；

根据所述实际占用的栅格的数目、每个栅格的宽度、每个栅格的高度以及栅格之间的间隙，确定该页面元素布局后的实际尺寸；

根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，并将缩放处理后的页面元素布局到该单元区域中。

由上可见，本发明实施例技术方案无需由设计人员预先设定每个页面元素的尺寸，而是在进行页面布局时，由程序实时确定页面元素布局后的实际尺寸，从而将各页面元素以大小错落的方式进行布局，这样不仅能够节省较多的人工成本，而且当页面中栅格区域的尺寸发生变化时，也能够自动根据变化后的栅格区域的尺寸进行页面布局，极大地提高了页面布局的灵活性。

优选的，将页面中的栅格区域划分为若干个单元区域，具体包括：

根据页面中栅格区域的宽度，确定将所述栅格区域划分为各栅格后每行所包含的栅格的数目；

根据每行所包含的栅格的数目，将所述栅格区域划分为若干个单元区域。

优选的，划分出的每个单元区域的长和宽所占用的栅格的数目均为确定出的每行所包含的栅格的数目。

优选的，确定该页面元素在该单元区域中实际占用的栅格的数目，具体包括：

确定已布局到该单元区域中的页面元素的数目；

根据已布局到该单元区域中的页面元素的数目，确定提取出的该页面元素在需要布局到该单元区域中的各页面元素中的布局顺序；

根据确定出的布局，在预先设置的、需要布局到该单元区域中的各页面元素的布局顺序和页面元素所占用的栅格的数目之间的对应关系中，确定提取出的该页面元素在该单元区域中实际占用的栅格的数目。

优选的，确定该页面元素在该单元区域中实际占用的栅格的数目，具体包括：

确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目；

根据所述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目。

优选的，确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目，具体包括：

按照由左至右以及由上至下的顺序，将该单元区域中未被占用的第一个栅格作为起始栅格，将与该起始栅格处于同一行的最后一个未被占用的栅格作为终止栅格，将所述起始栅格到终止栅格的栅格数目，确认为提取出的该页面元素在该单元区域中的最大宽度所对应的栅格数目。

优选的，根据所述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目，具体包括：

随机选取一个小于所述最大宽度所对应的栅格数目的随机数目；

将选取的所述随机数目确认为该页面元素在该单元区域中实际占用的栅格的数目

优选的，通过下述方式确定页面元素布局后的实际尺寸：

x=p×(a+i)-i

y=p×(b+i)-i

其中，x为页面元素布局后的实际宽度；

y为页面元素布局后的实际高度；

a为每个栅格的宽度；

b为每个栅格的高度；

i为栅格之间的间隙；

p为页面元素在该单元区域中实际占用的栅格的数目。

优选的，根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，具体包括：

确定该页面元素进行缩放处理前的宽度和高度的第一宽高比以及进行布局后的宽度和高度的第二宽高比；

将所述第一宽高比和所述第二宽高比进行比较；

若比较得到所述第一宽高比大于所述第二宽高比，则根据该页面元素布局后的实际高度，对该页面元素进行等比例缩放处理；

若比较得到所述第一宽高比小于所述第二宽高比，则根据该页面元素布局后的实际宽度，对该页面元素进行等比例缩放处理；

若比较得到所述第一宽高比等于所述第二宽高比，则根据该页面元素布局后的实际宽度或实际高度，对该页面元素进行等比例缩放处理。

优选的，将缩放处理后的页面元素布局到该单元区域中，具体包括：

若缩放处理后的尺寸超出了该页面元素布局后的实际尺寸，则对超出所述实际尺寸的部分进行隐藏处理；

将经过隐藏处理的页面元素布局到该单元区域中。

优选的，所述页面元素为图片元素和/或文字元素。

本发明实施例还提供一种页面布局装置，包括：

单元区域划分单元，用于将页面中的栅格区域划分为若干个单元区域；

页面布局单元，用于针对单元区域划分单元划分出的每一单元区域，重复执行下述操作，直至该单元区域中不存在未被占用的栅格：从待布局的页面元素中提取出一个页面元素，并确定该页面元素在该单元区域中实际占用的栅格的数目；根据所述实际占用的栅格的数目、每个栅格的宽度、每个栅格的高度以及栅格之间的间隙，确定该页面元素布局后的实际尺寸；根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，并将缩放处理后的页面元素布局到该单元区域中。

由上可见，本发明实施例技术方案无需由设计人员预先设定每个页面元素的尺寸，而是在进行页面布局时，由程序实时确定页面元素布局后的实际尺寸，从而将各页面元素以大小错落的方式进行布局，这样不仅能够节省较多的人工成本，而且当页面中栅格区域的尺寸发生变化时，也能够自动根据变化后的栅格区域的尺寸进行页面布局，极大地提高了页面布局的灵活性。

优选的，所述单元区域划分单元具体用于：

根据页面中栅格区域的宽度，确定将所述栅格区域划分为各栅格后每行所包含的栅格的数目；根据每行所包含的栅格的数目，将所述栅格区域划分为若干个单元区域。

优选的，所述单元区域划分单元划分出的每个单元区域的长和宽所占用的栅格的数目均为确定出的每行所包含的栅格的数目。

优选的，所述页面布局单元具体用于：

确定已布局到该单元区域中的页面元素的数目；根据已布局到该单元区域中的页面元素的数目，确定提取出的该页面元素在需要布局到该单元区域中的各页面元素中的布局顺序；根据确定出的布局，在预先设置的、需要布局到该单元区域中的各页面元素的布局顺序和页面元素所占用的栅格的数目之间的对应关系中，确定提取出的该页面元素在该单元区域中实际占用的栅格的数目。

优选的，所述页面布局单元具体用于：

确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目；

根据所述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目。

优选的，所述页面布局单元具体用于：

按照由左至右以及由上至下的顺序，将该单元区域中未被占用的第一个栅格作为起始栅格，将与该起始栅格处于同一行的最后一个未被占用的栅格作为终止栅格，将所述起始栅格到终止栅格的栅格数目，确认为提取出的该页面元素在该单元区域中的最大宽度所对应的栅格数目。

优选的，所述页面布局单元具体用于：

随机选取一个小于所述最大宽度所对应的栅格数目的随机数目；将选取的所述随机数目确认为该页面元素在该单元区域中实际占用的栅格的数目。

优选的，所述页面布局单元具体用于：

确定该页面元素进行缩放处理前的宽度和高度的第一宽高比以及进行布局后的宽度和高度的第二宽高比；将所述第一宽高比和所述第二宽高比进行比较；若比较得到所述第一宽高比大于所述第二宽高比，则根据该页面元素布局后的实际高度，对该页面元素进行等比例缩放处理；若比较得到所述第一宽高比小于所述第二宽高比，则根据该页面元素布局后的实际宽度，对该页面元素进行等比例缩放处理；若比较得到所述第一宽高比等于所述第二宽高比，则根据该页面元素布局后的实际宽度或实际高度，对该页面元素进行等比例缩放处理。

优选的，所述页面布局单元具体用于：

若缩放处理后的尺寸超出了该页面元素布局后的实际尺寸，则对超出所述实际尺寸的部分进行隐藏处理；将经过隐藏处理的页面元素布局到该单元区域中。

优选的，所述页面元素为图片元素和/或文字元素。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简要介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域的普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术中，栅格排列布局示意图；

图2为本发明实施例一中，页面布局方法流程示意图；

图3为本发明实施例一中，单元区域示意图；

图4为本发明实施例一中，缩放处理后的页面元素示意图一；

图5为本发明实施例一中，缩放处理后的页面元素示意图二；

图6为本发明实施例二中，页面布局装置结构示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部份实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

现有技术中，在将页面元素布局到页面中时，为了实现使各页面元素呈现错落式布局，一般由设计人员预先设定每个页面元素的尺寸，然后按照各页面元素的尺寸进行布局，但是这样就会耗费较多的人工成本，且当栅格区域的尺寸发生变化时，也需要重新设计各页面元素的尺寸，使得页面布局的灵活性较差。

有鉴于此，本发明实施例提出了一种页面布局方法，首先将页面中的栅格区域划分为若干个单元区域，在将待布局的页面元素布局到单元区域中时，实时确定该页面元素布局后的实际尺寸，然后将页面元素进行相应的缩放处理后布局到单元区域中。由上可见，本发明实施例技术方案无需由设计人员预先设定每个页面元素的尺寸，而是在进行页面布局时，由程序实时确定页面元素布局后的实际尺寸，从而将各页面元素以大小错落的方式进行布局，这样不仅能够节省较多的人工成本，而且当页面中栅格区域的尺寸发生变化时，也能够自动根据变化后的栅格区域的尺寸进行页面布局，极大地提高了页面布局的灵活性。

下面通过具体实施例对本发明方案进行详细描述，当然，本发明并不限于以下实施例。

实施例一

如图2所示，为本发明实施例一提出的页面布局方法流程图，其具体处理过程如下：

步骤21，将页面中的栅格区域划分为若干个单元区域，然后针对划分出的每一单元区域，重复执行步骤22～步骤24，直至该单元区域中不存在未被占用的栅格。

若需要针对某页面进行页面布局，则首先要确定该页面中能够进行栅格化的区域（也称为栅格区域）的宽度，然后根据栅格区域的宽度，确定将栅格区域划分为各栅格后每行所包含的栅格的数目，其中，若栅格区域的宽度为W，每个栅格的宽度为a，栅格与栅格之间的间隙为i，则通过下述公式（3）就可以计算得到每行所包含的栅格的数目N。

$N=\frac{W+i}{a+i}---\left(3\right)$

其中，上述公式（3）是由上述公式（1）推导得到的。

通过上述方式得到每行所包含的栅格的数目后，可以根据每行所包含的栅格的数目，将栅格区域划分为若干个单元区域。

优选的，可以使划分出的每个单元区域的长和宽所占用的栅格的数目均为确定出的每行所包含的栅格的数目。若确定出每行所包含的栅格的数目为N，则划分出的每个单元区域的长和宽均占用N个栅格。

若每个栅格的宽度为a，高度为b，栅格与栅格之间的间隙为i，则划分出的单元区域可以但不限于如图3所示。

将栅格区域划分为各单元区域后，可以针对每个单元区域，分别按照步骤22～步骤24的流程进行页面布局。本发明实施例一提出，可以依次针对各单元区域进行页面布局，较优的，可以按照单元区域在栅格区域中由上到下的顺序，依次针对各单元区域进行页面布局。

步骤22，从待布局的页面元素中提取出一个页面元素，并确定该页面元素在该单元区域中实际占用的栅格的数目。

本发明实施例一中，待布局的页面元素可以为图片元素，可以为文字元素，也可以为图片元素和文字元素。

在对单元区域进行页面布局时，先从待布局的各页面元素中提取出一个页面元素，将该页面元素布局到单元区域中之前，先确定该页面元素在该单元区域中实际占用的栅格的数目，本发明实施例一提出，可以但不限于采用下述两种方式确定页面元素在该单元区域中实际占用的栅格的数目，具体的：

第一种确定方式，先确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目，然后根据上述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目。

在页面中放置页面元素时，一般是按照由左至右以及由上至下的顺序进行放置，因此本发明实施例一提出，在确定页面元素在该单元区域中的最大宽度所对应的栅格数目时，可以按照由左至右以及由上至下的顺序，将该单元区域中未被占用的第一个栅格作为起始栅格，将与该起始栅格处于同一行的最后一个未被占用的栅格作为终止栅格，然后将所述起始栅格到终止栅格的栅格数目，确认为该页面元素在该单元区域中的最大宽度所对应的栅格数目。

其中，在单元区域中布局第一个页面元素时，由于该单元区域中的所有栅格均未被占用，因此该单元区域中每行所包含的栅格的数目N即为第一个页面元素在该单元区域中的最大宽度所对应的栅格数目。

确定出页面元素在单元区域中的最大宽度所对应的栅格数目后，可以随机选取一个小于上述最大宽度所对应的栅格数目的随机数目，然后将选取的随机数目确认为该页面元素在该单元区域中实际占用的栅格的数目。

若页面元素在单元区域中的最大宽度所对应的栅格数目为m，则可以在0～m中选取一个随机整数p，将选取的该随机整数p作为该页面元素在该单元区域中实际占用的栅格的数目。

第二种确定方式，预先针对各种宽度的栅格区域分别设置单元区域布局方式，在对单元区域进行布局时，可以按照对应的布局方式进行布局，因此有效地避免效果较差的布局方式，具体的：

获取针对该单元区域对应的布局方式的相关信息，其中，布局方式的相关信息为需要布局到该单元区域中的各页面元素的布局顺序和页面元素所占用的栅格的数目之间的对应关系。

在将提取出的页面元素布局到单元区域中之前，先确定已布局到该单元区域中的页面元素的数目，从而能够确定出提取出的页面元素的布局顺序，然后根据确定出的布局顺序，在上述对应关系中，就可以确定出提取出的该页面元素在该单元区域中实际占用的栅格的数目。

步骤23，根据所述实际占用的栅格的数目、每个栅格的宽度、每个栅格的高度以及栅格之间的间隙，确定该页面元素布局后的实际尺寸。

其中，可以通过下述公式（4）和公式（5）确定页面元素布局后的实际尺寸：

x=p×(a+i)-i   （4）

y=p×(b+i)-i   （5）

其中，x为页面元素布局后的实际宽度；y为页面元素布局后的实际高度；a为每个栅格的宽度；b为每个栅格的高度；i为栅格之间的间隙；p为页面元素在该单元区域中实际占用的栅格的数目。

步骤24，根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，并将缩放处理后的页面元素布局到该单元区域中。

将缩放处理后的页面元素布局到该单元区域中时，可以按照由左至右以及由上至下的顺序进行布局，具体的，以上述起始栅格为起点，将缩放处理后的页面元素放置到该单元区域中。

若步骤22确定出该页面元素在该单元区域中实际占用的栅格的数目为p个，则将页面元素布局到单元区域中后，可以将从上述起始栅格开始，向右p个栅格以及向下p个栅格形成的区域中的各栅格标注为“已占用”，后续再向该单元区域中布局其他页面元素时，可以在未标注为“已占用”的栅格中进行布局。

在对页面元素进行缩放处理时，为了避免页面元素变形，可以进行等比例缩放。而在进行等比例缩放时，需要预先获知缩放后的宽度或缩放后的高度，然后再根据缩放后的宽度或高度进行等比例缩放处理。

本发明实施例一提出，在对页面元素进行缩放处理时，可以首先确定该页面元素进行缩放处理前的宽度和高度的第一宽高比以及进行布局后的宽度和高度的第二宽高比，将所述第一宽高比和所述第二宽高比进行比较，若比较得到所述第一宽高比等于所述第二宽高比，则既可以根据该页面元素布局后的实际宽度对该页面元素进行等比例缩放处理，也可以根据该页面元素布局后的实际高度对该页面元素进行等比例缩放处理，缩放处理后的页面元素的尺寸与步骤23确定出的布局后的实际尺寸相等，因此可以直接将缩放处理后的页面元素放置到该单元区域中；

若比较得到所述第一宽高比大于所述第二宽高比，则可以根据该页面元素布局后的实际高度对该页面元素进行等比例缩放处理，那么缩放处理后的页面元素的尺寸就超出了步骤23确定出的布局后的实际尺寸，具体的，缩放处理后的页面元素的宽度大于根据布局后的实际尺寸确定出的布局后的宽度，缩放处理后的页面元素的高度等于根据布局后的实际尺寸确定出的布局后的高度，此时，可以对超出布局后的实际尺寸的部分进行隐藏处理，然后将经过隐藏处理的页面元素布局到该单元区域中。如图4所示，图中的阴影部分为超出布局后的实际尺寸的部分，即需要进行隐藏处理的部分。

若比较得到所述第一宽高比小于所述第二宽高比，则可以根据该页面元素布局后的实际宽度对该页面元素进行等比例缩放处理，那么缩放处理后的页面元素的尺寸就超出了步骤23确定出的布局后的实际尺寸，具体的，缩放处理后的页面元素的高度大于根据布局后的实际尺寸确定出的布局后的高度，缩放处理后的页面元素的宽度等于根据布局后的实际尺寸确定出的布局后的宽度，此时，可以对超出布局后的实际尺寸的部分进行隐藏处理，然后将经过隐藏处理的页面元素布局到该单元区域中。如图5所示，图中的阴影部分为超出布局后的实际尺寸的部分，即需要进行隐藏处理的部分。

该方案能够适应不同宽度的栅格系统，当栅格系统外围容器宽度发生变化后，应当使用本方法对栅格中元素重新布局，以适应新的尺寸。

若该单元区域中的栅格均被占用，则该单元区域的布局流程结束，按照上述流程，继续针对下一个单元区域进行页面布局，直至所有页面元素均布局到页面中。

由上可见，本发明实施例提出的页面布局方法能够适应不同宽度的栅格区域，当栅格区域的宽度发生变化时，采用本发明实施例提出的方案能够自动对各页面元素进行重新布局，以适应新的尺寸，从而进一步提高了页面布局的灵活性。

实施例二

与本发明实施例一中的页面布局方法对应，本发明实施例二提供一种页面布局装置，其结构如图6所示，包括：

单元区域划分单元61，用于将页面中的栅格区域划分为若干个单元区域；

页面布局单元62，用于针对单元区域划分单元61划分出的每一单元区域，重复执行下述操作，直至该单元区域中不存在未被占用的栅格：从待布局的页面元素中提取出一个页面元素，并确定该页面元素在该单元区域中实际占用的栅格的数目；根据所述实际占用的栅格的数目、每个栅格的宽度、每个栅格的高度以及栅格之间的间隙，确定该页面元素布局后的实际尺寸；根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，并将缩放处理后的页面元素布局到该单元区域中。

优选的，所述单元区域划分单元61具体用于：

根据页面中栅格区域的宽度，确定将所述栅格区域划分为各栅格后每行所包含的栅格的数目；根据每行所包含的栅格的数目，将所述栅格区域划分为若干个单元区域。

优选的，所述单元区域划分单元61划分出的每个单元区域的长和宽所占用的栅格的数目均为确定出的每行所包含的栅格的数目。

优选的，所述页面布局单元62具体用于：

确定已布局到该单元区域中的页面元素的数目；根据已布局到该单元区域中的页面元素的数目，确定提取出的该页面元素在需要布局到该单元区域中的各页面元素中的布局顺序；根据确定出的布局，在预先设置的、需要布局到该单元区域中的各页面元素的布局顺序和页面元素所占用的栅格的数目之间的对应关系中，确定提取出的该页面元素在该单元区域中实际占用的栅格的数目。

优选的，所述页面布局单元62具体用于：

确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目；

根据所述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目。

优选的，所述页面布局单元62具体用于：

按照由左至右以及由上至下的顺序，将该单元区域中未被占用的第一个栅格作为起始栅格，将与该起始栅格处于同一行的最后一个未被占用的栅格作为终止栅格，将所述起始栅格到终止栅格的栅格数目，确认为提取出的该页面元素在该单元区域中的最大宽度所对应的栅格数目。

优选的，所述页面布局单元62具体用于：

随机选取一个小于所述最大宽度所对应的栅格数目的随机数目；将选取的所述随机数目确认为该页面元素在该单元区域中实际占用的栅格的数目。

优选的，所述页面布局单元62具体用于：

确定该页面元素进行缩放处理前的宽度和高度的第一宽高比以及进行布局后的宽度和高度的第二宽高比；将所述第一宽高比和所述第二宽高比进行比较；若比较得到所述第一宽高比大于所述第二宽高比，则根据该页面元素布局后的实际高度，对该页面元素进行等比例缩放处理；若比较得到所述第一宽高比小于所述第二宽高比，则根据该页面元素布局后的实际宽度，对该页面元素进行等比例缩放处理；若比较得到所述第一宽高比等于所述第二宽高比，则根据该页面元素布局后的实际宽度或实际高度，对该页面元素进行等比例缩放处理。

优选的，所述页面布局单元62具体用于：

若缩放处理后的尺寸超出了该页面元素布局后的实际尺寸，则对超出所述实际尺寸的部分进行隐藏处理；将经过隐藏处理的页面元素布局到该单元区域中。

优选的，所述页面元素为图片元素和/或文字元素。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质（包括但不限于磁盘存储器、CD-ROM、光学存储器等）上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

按照本文中的界定，计算机可读介质不包括非持续性的电脑可读媒体(transitory media)，如调制的数据信号和载波。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (21)

1.一种页面布局方法，其特征在于，包括：

将页面中的栅格区域划分为若干个单元区域；

针对划分出的每一单元区域，重复执行下述操作，直至该单元区域中不存在未被占用的栅格：

从待布局的页面元素中提取出一个页面元素，并确定该页面元素在该单元区域中实际占用的栅格的数目；

根据所述实际占用的栅格的数目、每个栅格的宽度、每个栅格的高度以及栅格之间的间隙，确定该页面元素布局后的实际尺寸；

根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，并将缩放处理后的页面元素布局到该单元区域中。

2.如权利要求1所述的方法，其特征在于，将页面中的栅格区域划分为若干个单元区域，具体包括：

根据页面中栅格区域的宽度，确定将所述栅格区域划分为各栅格后每行所包含的栅格的数目；

根据每行所包含的栅格的数目，将所述栅格区域划分为若干个单元区域。

3.如权利要求2所述的方法，其特征在于，划分出的每个单元区域的长和宽所占用的栅格的数目均为确定出的每行所包含的栅格的数目。

4.如权利要求1所述的方法，其特征在于，确定该页面元素在该单元区域中实际占用的栅格的数目，具体包括：

确定已布局到该单元区域中的页面元素的数目；

根据已布局到该单元区域中的页面元素的数目，确定提取出的该页面元素在需要布局到该单元区域中的各页面元素中的布局顺序；

根据确定出的布局，在预先设置的、需要布局到该单元区域中的各页面元素的布局顺序和页面元素所占用的栅格的数目之间的对应关系中，确定提取出的该页面元素在该单元区域中实际占用的栅格的数目。

5.如权利要求1所述的方法，其特征在于，确定该页面元素在该单元区域中实际占用的栅格的数目，具体包括：

确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目；

根据所述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目。

6.如权利要求5所述的方法，其特征在于，确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目，具体包括：

按照由左至右以及由上至下的顺序，将该单元区域中未被占用的第一个栅格作为起始栅格，将与该起始栅格处于同一行的最后一个未被占用的栅格作为终止栅格，将所述起始栅格到终止栅格的栅格数目，确认为提取出的该页面元素在该单元区域中的最大宽度所对应的栅格数目。

7.如权利要求5所述的方法，其特征在于，根据所述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目，具体包括：

随机选取一个小于所述最大宽度所对应的栅格数目的随机数目；

将选取的所述随机数目确认为该页面元素在该单元区域中实际占用的栅格的数目。

8.如权利要求1所述的方法，其特征在于，通过下述方式确定页面元素布局后的实际尺寸：

x=p×(a+i)-i

y=p×(b+i)-i

其中，x为页面元素布局后的实际宽度；

y为页面元素布局后的实际高度；

a为每个栅格的宽度；

b为每个栅格的高度；

i为栅格之间的间隙；

p为页面元素在该单元区域中实际占用的栅格的数目。

9.如权利要求1所述的方法，其特征在于，根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，具体包括：

确定该页面元素进行缩放处理前的宽度和高度的第一宽高比以及进行布局后的宽度和高度的第二宽高比；

将所述第一宽高比和所述第二宽高比进行比较；

若比较得到所述第一宽高比大于所述第二宽高比，则根据该页面元素布局后的实际高度，对该页面元素进行等比例缩放处理；

若比较得到所述第一宽高比小于所述第二宽高比，则根据该页面元素布局后的实际宽度，对该页面元素进行等比例缩放处理；

若比较得到所述第一宽高比等于所述第二宽高比，则根据该页面元素布局后的实际宽度或实际高度，对该页面元素进行等比例缩放处理。

10.如权利要求9所述的方法，其特征在于，将缩放处理后的页面元素布局到该单元区域中，具体包括：

若缩放处理后的尺寸超出了该页面元素布局后的实际尺寸，则对超出所述实际尺寸的部分进行隐藏处理；

将经过隐藏处理的页面元素布局到该单元区域中。

11.如权利要求1～10中任一权利要求所述的方法，其特征在于，所述页面元素为图片元素和/或文字元素。

12.一种页面布局装置，其特征在于，包括：

单元区域划分单元，用于将页面中的栅格区域划分为若干个单元区域；

页面布局单元，用于针对单元区域划分单元划分出的每一单元区域，重复执行下述操作，直至该单元区域中不存在未被占用的栅格：从待布局的页面元素中提取出一个页面元素，并确定该页面元素在该单元区域中实际占用的栅格的数目；根据所述实际占用的栅格的数目、每个栅格的宽度、每个栅格的高度以及栅格之间的间隙，确定该页面元素布局后的实际尺寸；根据该页面元素布局后的实际尺寸，对该页面元素进行缩放处理，并将缩放处理后的页面元素布局到该单元区域中。

13.如权利要求12所述的装置，其特征在于，所述单元区域划分单元具体用于：

根据页面中栅格区域的宽度，确定将所述栅格区域划分为各栅格后每行所包含的栅格的数目；根据每行所包含的栅格的数目，将所述栅格区域划分为若干个单元区域。

14.如权利要求13所述的装置，其特征在于，所述单元区域划分单元划分出的每个单元区域的长和宽所占用的栅格的数目均为确定出的每行所包含的栅格的数目。

15.如权利要求12所述的装置，其特征在于，所述页面布局单元具体用于：

确定已布局到该单元区域中的页面元素的数目；根据已布局到该单元区域中的页面元素的数目，确定提取出的该页面元素在需要布局到该单元区域中的各页面元素中的布局顺序；根据确定出的布局，在预先设置的、需要布局到该单元区域中的各页面元素的布局顺序和页面元素所占用的栅格的数目之间的对应关系中，确定提取出的该页面元素在该单元区域中实际占用的栅格的数目。

16.如权利要求12所述的装置，其特征在于，所述页面布局单元具体用于：

确定提取出的页面元素在该单元区域中的最大宽度所对应的栅格数目；

根据所述最大宽度所对应的栅格数目，确定该页面元素在该单元区域中实际占用的栅格的数目。

17.如权利要求16所述的装置，其特征在于，所述页面布局单元具体用于：

按照由左至右以及由上至下的顺序，将该单元区域中未被占用的第一个栅格作为起始栅格，将与该起始栅格处于同一行的最后一个未被占用的栅格作为终止栅格，将所述起始栅格到终止栅格的栅格数目，确认为提取出的该页面元素在该单元区域中的最大宽度所对应的栅格数目。

18.如权利要求16所述的装置，其特征在于，所述页面布局单元具体用于：

随机选取一个小于所述最大宽度所对应的栅格数目的随机数目；将选取的所述随机数目确认为该页面元素在该单元区域中实际占用的栅格的数目。

19.如权利要求12所述的装置，其特征在于，所述页面布局单元具体用于：

确定该页面元素进行缩放处理前的宽度和高度的第一宽高比以及进行布局后的宽度和高度的第二宽高比；将所述第一宽高比和所述第二宽高比进行比较；若比较得到所述第一宽高比大于所述第二宽高比，则根据该页面元素布局后的实际高度，对该页面元素进行等比例缩放处理；若比较得到所述第一宽高比小于所述第二宽高比，则根据该页面元素布局后的实际宽度，对该页面元素进行等比例缩放处理；若比较得到所述第一宽高比等于所述第二宽高比，则根据该页面元素布局后的实际宽度或实际高度，对该页面元素进行等比例缩放处理。

20.如权利要求19所述的装置，其特征在于，所述页面布局单元具体用于：

若缩放处理后的尺寸超出了该页面元素布局后的实际尺寸，则对超出所述实际尺寸的部分进行隐藏处理；将经过隐藏处理的页面元素布局到该单元区域中。

21.如权利要求12～20中任一权利要求所述的装置，其特征在于，所述页面元素为图片元素和/或文字元素。

Images