[发明专利]页面布局方法及装置

说明书

技术领域

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

背景技术

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

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

若页面中的栅格区域的宽度为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为自然数。

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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