CN113961296B - 页面元素布局方法、装置、可读介质及电子设备 - Google Patents

Abstract

本公开涉及一种页面元素布局方法、装置、可读介质及电子设备。所述方法包括：从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；根据所述元素的布局参数，将各个元素填充至目标容器；在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。从而，对于关联同一对象的元素，以元素为单位进行合并，且以合并得到的结果为单位对其中包含的元素属性统一进行设置，既能够提升元素设置灵活性及精细程度，又不会导致开发人员工作量过度增加。

Description

页面元素布局方法、装置、可读介质及电子设备

技术领域

本公开涉及计算机技术领域，具体地，涉及一种页面元素布局方法、装置、可读介质及电子设备。

背景技术

目前，互动编辑器提供有多种预设的互动素材(例如，互动组件、互动模板等)，可以通过互动编辑器基于互动素材制作互动作品。在使用互动素材时，可以设置互动素材的可编辑属性，以选择是否开放互动素材的编辑权限。一般情况下，互动素材内包含多个元素，并且，在设置这类互动素材的可编辑属性时通常以组为维度，即，互动素材内所有元素的可编辑属性被统一设置，这种设置方式不够精细，且过多的元素将会增加素材的使用难度。同时，若将互动素材内各元素的属性设置相互分离开来，则开发人员在设置过程中需要对每一个元素的属性单独进行设置，会导致开发人员的工作量增大。

发明内容

提供该发明内容部分以便以简要的形式介绍构思，这些构思将在后面的具体实施方式部分被详细描述。该发明内容部分并不旨在标识要求保护的技术方案的关键特征或必要特征，也不旨在用于限制所要求的保护的技术方案的范围。

第一方面，本公开提供一种页面元素布局方法，所述方法包括：

从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；

根据所述元素的布局参数，将各个元素填充至目标容器；

在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

第二方面，本公开提供一种页面元素布局装置，所述装置包括：

参数提取模块，用于从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；

填充模块，用于根据所述元素的布局参数，将各个元素填充至目标容器；

合并模块，用于在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

第三方面，本公开提供一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现本公开第一方面所述方法的步骤。

第四方面，本公开提供一种电子设备，包括：

存储装置，其上存储有计算机程序；

处理装置，用于执行所述存储装置中的所述计算机程序，以实现本公开第一方面所述方法的步骤。

通过上述技术方案，从网格布局代码中提取待填充的元素的布局参数，并根据元素的布局参数将各个元素填充至目标容器，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸，以及，在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与目标关联对象关联的各元素在目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。由此，以网格布局为基础，将元素填充到目标容器中后，对于关联有同一关联对象的多个元素，根据这些元素在网格布局中所处的位置，对其中能够合并的部分元素适应性地进行合并。从而，对于关联同一对象的元素，以元素为单位进行合并，同时，对于已合并的元素，还能以合并得到的结果为单位对其中包含的元素属性统一进行设置，这样，既能够提升元素设置的灵活性及精细程度，又不会导致开发人员工作量的过度增加。

本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。在附图中：

图1是带有互动素材的页面和互动作品页面一种示例性的示意图；

图2是根据本公开的一种实施方式提供的页面元素布局方法的流程图；

图3是根据本公开提供的页面元素布局方法中，根据元素的布局参数，将各个元素填充至目标容器的步骤的一种示例性的流程图；

图4A～图4C是本公开提供的页面元素布局方法中，目标容器的示例性示意图；

图5是根据本公开提供的页面元素布局方法中，根据目标元素的元素尺寸和目标状态参数，确定目标元素的目标填充区域的步骤的一种示例性的流程图；

图6A～图6C是本公开提供的页面元素布局方法中目标容器的示例性示意图；

图7是根据本公开提供的页面元素布局方法中，根据与目标关联对象关联的各元素在目标容器中所处的位置，确定能够合并的元素的步骤的一种示例性的流程图；

图8A～8F是本公开提供的页面元素布局方法中目标容器的示例性示意图；

图9是本公开提供的页面元素布局方法中用于设置互动素材可编辑属性的页面的一种示例性的示意图；

图10是根据本公开的一种实施方式提供的页面元素布局装置的框图；

图11示出了适于用来实现本公开实施例的电子设备的结构示意图。

具体实施方式

下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。

应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。

本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。

需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。

需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。

本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。

如背景技术所述，目前可以设置互动素材的可编辑属性，以选择是否开放互动素材的编辑权限。相关技术中，设置互动素材的可编辑属性时通常以组为维度，如图1左侧页面图所示，对于“变换”这一互动素材，若设置其可编辑属性为可编辑，导致“变换”这一互动素材所包含的预置元素(透明度、锚点X、锚点Y、水平缩放、垂直缩放、旋转角度)成组地被设置为可编辑，相应地，制作完成的互动作品页面如图1右侧页面图所示，其中，“变换”的所有预置元素均出现在了互动作品页面中。但是，开发人员并不总是需要互动素材中的所有预置元素(例如，需要锚点X、锚点Y和垂直缩放而不需要透明度、水平缩放和旋转角度)，因此，这种以组为维度的设置方式不够精细，不能精确到单个元素，并且，过多的元素将会增加素材的使用难度。

此外，同一互动素材中，可能包含存在相关性的两个或更多数量的关联元素(例如，图1左侧页面图中的锚点X与锚点Y)，这些关联元素的可编辑属性是需要统一设置的，因此，盲目地将可编辑属性的设置精确到单个元素将导致开发人员的工作量增加，不利于开发效率的提升。

为了解决上述技术问题，本公开提供一种页面元素布局方法、装置、可读介质及电子设备，既能提升元素设置的灵活性及精细程度，又不会导致开发人员工作量的过度增加。

图2是根据本公开的一种实施方式提供的页面元素布局方法的流程图。如图2所示，本公开提供的方法可以包括步骤11～步骤13：

在步骤11中，从网格布局代码中提取待填充的元素的布局参数；

在步骤12中，根据元素的布局参数，将各个元素填充至目标容器；

在步骤13中，在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与目标关联对象关联的各元素在目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

网格布局(即，Grid)是目前常用的CSS(Cascading Style Sheets，层叠样式表)布局方案，它将网页划分为一个个小的网格(网格的最小单元在后文中将以单元网格代称)，可以任意组合不同的网格，做出各种各样的布局，在本公开的互动编辑器中，使用网格布局以实现跨行、跨列混排的效果。

网格布局代码中包含与元素的布局相关的信息，因此，基于网格布局代码，通过步骤11，可以从中提取待填充的元素的布局参数。通常情况下，元素的布局参数在网格布局代码中的指定位置、且以指定数据格式存在，符合统一的编写规则，从而，基于网格布局代码的编写规则，可以从网格布局代码中的指定位置提取指定数据格式的数据，这样，待填充的元素的布局参数得以提取。

其中，元素的布局参数可以包括但不限于元素标识、元素所关联的关联对象和元素尺寸等。元素标识用于唯一标识元素。元素所关联的关联对象可以理解为元素所关联的标识性信息，例如，若某一互动素材包含透明度、水平缩放、垂直缩放、宽度、高度这些元素，且其中宽度和高度相关联，则宽度、高度可以关联同一关联对象，以及，若水平缩放和垂直缩放相关联，则水平缩放和垂直缩放可以关联同一关联对象，上述关联对象可以分配不同的标识性信息以示区分。元素尺寸可以为元素所占单元网格的行数与列数，由于网格布局将需填充的容器划分为一个个小的网格，因此，元素尺寸可以直接利用单元网格行数、列数进行表征。

举例来说，若网格布局代码如下：

根据编写规则可知，元素填充的相关信息在<div class＝"container">中定义，grid-row这一属性表征元素在网格布局中有关于行的尺寸，grid-column这一属性表征元素在网格布局中有关于列的尺寸。关键词span后方跟随数字，用于表征元素横跨(即，合并)单元网格的行数或列数，比如，grid-row:span 5就表征元素占据5行网格，grid-column:span 4就表征元素占据4列单元网格。以及，在container内的<div>标签中包含的如“0-5”一类的信息表征元素标识和元素所关联的关联对象，其统一形式为“元素标识-关联对象”。

基于上述网格布局代码，可以提取出如下格式的布局参数：

其中，index为元素标识，union为元素所关联的关联对象，column为元素占据单元网格的列数，rowSpan为元素占据单元网格的行数。例如，{index:0,union:5,column:6,rowSpan:4}这一布局参数可以表征元素标识为0的这一元素关联于5这一对象，且该元素占据单元网格的4行、6列。

在将待填充的所有元素的布局参数提取完毕后，可以执行步骤12，根据元素的布局参数，将各个元素填充至目标容器。

在一种可能的实施方式中，如图3所示，步骤12可以包括以下步骤：

在步骤21中，根据元素标识，从待填充的元素中获取本次确定填充区域的目标元素；

在步骤22中，获取目标容器当前的状态参数，作为目标状态参数；

在步骤23中，根据目标元素的元素尺寸和目标状态参数，确定目标元素的目标填充区域；

在步骤241中，判断待填充的各个元素是否均已确定出对应的目标填充区域；

若经步骤241确定存在还未确定填充区域的元素(即，待填充的各个元素并未均已确定出对应的目标填充区域)，执行步骤242；

在步骤242中，更新目标容器的状态参数，并再次执行步骤21，直至待填充的各元素均已确定出对应的目标填充区域；

在步骤25中，将各个元素填充至该元素对应的目标填充区域中。

对于多个待填充的元素，通常具有预置的确定填充位置的顺序。以前文所示的布局参数为例，其元素标识分别用0～12这样的数字表征，因此，可以按照元素标识由小到大的顺序逐个确定填充位置，即，第一次填充，确定本次(第一次)填充的目标元素为元素标识为0的元素，该元素的填充位置确定完毕(或者，填充完毕)后进行第二次填充位置的确定，确定本次(第二次)确定填充位置的目标元素为元素标识为1的元素，以此类推。

在通过步骤21获取到本次确定填充区域的目标元素的情况下，还需要获取目标容器当前的状态参数(即，目标状态参数)。其中，如上所述，目标容器为网格容器。目标容器的状态参数能够反映目标容器内部的填充情况，即，目标容器内有哪些网格已被填充(或者，已被确定将用于填充)，以便在下一次填充元素时选择元素的填充位置。

其中，目标容器的状态参数可以包括但不限于以下几者：目标容器的已填充行数、已填充列数、优先填充行信息和目标容器内已填充行的每列空余行数。

目标容器的已填充行数用于表征目标容器中确定被用于填充元素的网格总行数，即，目标容器中有多少行网格已经确定被用于填充元素。目标容器的已填充列数用于表征目标容器中确定被用于填充元素的网格总列数，即，目标容器中有多少列网格已经确定被用于填充元素。目标容器的优先填充行信息用于表征当前向目标容器填充元素最先试图填充的位置，一般情况下会设置填充目标容器的填充规则，例如，先在某一行中从左到右进行元素填充，在该行无法继续填充元素的情况下，转至该行的下一行最靠左的未填充位置，再继续进行填充。因此，优先填充行信息至少用于指示目标容器中最优先填充的目标行。此外，优先填充行信息还可以包括目标行中最优先填充的列的列序号，精确到目标行中的列，即精确到最优先填充的单元网格位置。已填充行的每列空余行数用于指示在目标容器中已确定填充元素的行中，每一列分别有多少行还可以用于元素填充。示例地，假设目标容器的网格总列数为12，该目标容器的状态参数可以表示为如下内容：

其中，column为已填充列数，rowSpan已填充行数，curRow为优先填充行信息，curRow.span为目标行，curRow.index为目标行的列序号，gaps为用于表征每列空余行数的数组。因此，基于上述内容，可知目标容器在初始状态下未填充任何元素，其已填充行数和已填充列数均为0，目标行序号为0(代码编写过程中通常以0开始，此处行序号为0表征该行是目标容器的首行)，目标行的列序号为0(即，第0行的第0列，其中，列序号为0表征该列是目标容器的首列)，每列空余行数均为0，相应的数组为{0,0,0,0,0,0,0,0,0,0,0,0,}。

再例如，以图4A所示的目标容器为例，该目标容器为8行(第0行～第7行)、8列(第0列～第7列)的网格容器，各网格用线条区分(在实际填充时，这些表征网格的线条并不需要示出，此处画出目的在于方便说明)，在图4A所示的目标容器中，由斜线填充的粗边框矩形表征元素所占用的网格区域，可知，在图4A所示的目标容器中，两个元素的填充区域已被确定，分别是占据4行、4列的元素B1和占据2行、3列的元素B2，且当前最优先用于填充的单元网格为C1，相应地，目标容器当前的状态参数为：已填充行数为4，已填充列数为7，优先填充行信息为第0行、第7列，每列空余行数数组[0,0,0,0,2,2,2,4]。

在获取到本次确定填充区域的目标元素以及目标容器当前的状态参数(目标状态参数)后，即可进行本次填充区域的确定。

在步骤23中，根据目标元素的元素尺寸和目标状态参数，确定目标元素的目标填充区域。

在一种可能的实施方式中，步骤23中，根据目标元素的元素尺寸和目标状态参数，确定目标元素的目标填充区域，可以包括以下步骤，如图5所示：

在步骤41中，确定当前的目标状态参数对应的目标行中最优先填充的目标单元网格；

在步骤42中，根据目标元素的元素尺寸和目标单元网格，判断目标元素能否在目标行填充；

在步骤43中，若确定目标元素能够在目标行填充，将以目标单元网格为顶角网格、且尺寸与目标元素的元素尺寸一致的区域确定为目标填充区域。

其中，目标单元网格为目标容器当前最优先被填充的单元网格，以图4A所示的目标容器为例，目标单元网格就是C1。

在一种可能的实施例中，若优先填充行信息不仅包括目标行，还包括目标行中最优先填充的列的列序号，则根据优先填充行信息，就可以确定目标单元网格。

在另一种可能的实施方式中，若优先填充行信息仅包括目标行，而不包括目标行中最优先填充的列的列序号，那么，目标单元网格可以根据目标容器内已填充行的每列空余行数确定。以图4A所示目标容器为例，其目标行为目标容器中的第0行，且每列空余行数数组为[0,0,0,0,2,2,2,4]，再根据目标容器当前的已填充行数4，可以确定第0行的最后一列还未填充，因此，可以确定目标单元网格为目标容器第0行、第7列的单元网格。

在确定目标单元网格之后，可以执行步骤42，即，根据目标元素的元素尺寸和目标单元网格，判断目标元素能否在目标行填充。

在一种可能的实施方式中，步骤42可以包括以下步骤：

以目标单元网格所在列为起始列，确定目标行的空余列数；

若空余列数不小于目标元素所占的列数，确定目标元素能够在目标行填充；

若空余列数小于目标元素所占的列数，确定目标元素不能在目标行填充。

如前文所述，目标元素的元素尺寸包括目标元素所占的行数和列数，即，目标元素横跨网格的行数与列数。

以目标单元网格所在列为起始列，确定目标行的空余列数，也就是确定目标行还有自目标单元网格所在的列开始，共剩余多少列可以用于填充。若该空余列数不小于目标元素所占的列数，说明目标行有足够的列可以供目标元素填充，因此，可以确定目标元素能够在目标行填充。否则，若该空余列数小于目标元素所占的列数，说明目标行目前余下的列已经不足供目标元素填充，目标元素无法填充到目标行。以图4A所示的目标容器为例，若目标单元网格为C1，假设目标元素的元素尺寸为3行、1列，此时目标行的空余列数为1，它不小于目标元素的列数1，因此，可以确定该目标元素能够在目标行填充。再例如，若在图4A所示的目标容器中，目标单元网格为C1，假设目标元素为1行、3列，此时目标行的空余列数为1，它小于目标元素的列数3，因此，可以确定目标元素不能在目标行填充。

在确定目标元素能够在目标行填充的情况下，执行步骤43，即，将以目标单元网格为顶角网格、且尺寸与目标元素的元素尺寸一致的区域确定为目标填充区域。也就是说，在确定目标元素能够在目标行填充的情况下，可以根据目标元素的元素尺寸，确定包含有目标单元网格的区域为目标填充区域。其中，在遵循从上到下、从左到右的基本填充规则的基础上，目标单元网格将处于目标填充区域的左上角，即，目标单元网格为目标填充区域左上顶角网格。目标填充区域可以为矩形，示例地，矩形的目标填充区域可以通过四个顶点在目标容器的坐标来表征。

以图4A所示的目标容器为例，若目标单元网格为C1，假设目标元素B3的元素尺寸为3行、1列，由上文可知目标元素B3能够在目标行填充，那么，可以确定以目标单元网格C1为顶角网格的3行1列的区域为目标填充区域。相应地，在后续填充完毕的目标元素B3将如图4B中所示。

然而，若确定目标元素不能在目标行填充，则可以将当前目标行的下一行确定为新的目标行，以更新目标状态参数，并再次执行步骤41及后续步骤，直至确定目标填充区域。

再以图4A所示的目标容器为例，若目标单元网格为C1，假设目标元素B4的元素尺寸为1行、3列，由上文可知目标元素B4不能在目标行填充，那么，可以将当前目标行(第0行)的下一行(第1行)作为新的目标行，并以此更新目标容器的当前状态参数(即，目标状态参数)，并再次执行步骤41及后续步骤，也就是重新在新的目标行(第1行)中确定新的目标单元网格并继续寻找能够容纳目标元素B4的目标填充区域。

之后，由图4A可知，在新一次的处理过程中，当前的目标行为第1行，进而可以确定目标单元网格为C2，可见，目标元素B4仍然无法在当前的目标行填充。那么，可以将当前目标行(第1行)的下一行(第2行)作为新的目标行，并以此更新目标容器的当前状态参数(即，目标状态参数)，并再次执行步骤41及后续步骤，也就是重新在新的目标行(第2行)中确定新的目标单元网格并继续寻找能够容纳目标元素B4的目标填充区域。

之后，由图4A可知，在新一次的处理过程中，当前的目标当为第2行，进而可以确定目标单元网格为C3，可见，目标行的空余列数4大于目标元素B4的列数3，从而，可以确定目标元素B3能够在第3行填充。从而，可以确定以目标单元网格C3为顶角网格的1行、3列的区域为目标填充区域。相应地，在后续填充完毕的目标元素B4将如图4C中所示。

在确定出目标元素的目标填充区域后，若存在还未确定填充区域的元素，更新目标容器的状态参数，并再次执行步骤21，直至待填充的各元素均已确定出对应的目标填充区域。

若确定出当前的目标元素的目标填充区域后，还存在未确定填充区域的元素，说明并非所有需要填充的元素都已经找到了对应的填充区域，因此，需要更新目标容器的状态参数，并返回步骤21，从未确定填充区域的元素中确定新的目标元素，并确定该目标元素的目标填充区域，直至所有元素均已确定出对应的目标填充区域。其中，需要依据目标容器填充了当前目标元素后的状态进行其状态参数的更新。

从而，基于元素各自对应的目标填充区域，将元素填充至该元素对应的目标填充区域，以实现各元素的填充。其中，由于目标容器的状态参数表征的是已确定填充区域的元素被填充到目标容器后的状态参数，即，有哪些单元网格已经被预定作为元素的填充区域，因此，只要元素的填充区域确定，无论该元素是否被实际填充到目标容器，目标容器的状态参数并不受到影响。由此，对于元素的填充可以在确定出该元素的目标填充区域后就进行，也可以在所有元素的目标填充区域都确定后再分别进行填充，本公开对此不限定。

下面将以上文提供的基于网格布局代码提取的布局参数为例，对本公开中确定元素填充位置(也就是填充区域)的过程进行解释说明。其中，目标容器为前文示例中提供的12列(第0列～第11列)网格容器，且确定元素填充区域按照元素标识由小到大的顺序进行。

在第一次确定填充区域时，目标元素为元素标识为0的元素(后文将称为元素D1)，其布局参数为{index:0,union:5,column:6,rowSpan:4}，可知，元素D1为4行、6列，此时目标容器为空，其状态参数如前文所示的12列目标容器未填充任何元素时的状态参数，其中，curRow:{span:0,index:0}，因此，可以确定目标单元网格为目标容器第0行的第0列的单元网格(即，目标容器左上角的单元网格)，本次应从目标容器第0行的第0列开始填充，进而，基于元素D1的尺寸可确定目标填充区域的四个顶点依次为(6,0)、(6,4)、(0,4)、(0,0)，元素D1被填充到目标填充区域后，目标容器可以如图6A所示。

此时，还存在未填充的元素，因此更新目标容器的状态参数为：

其中，curRow为{span:0,index:6}表示下一次填充从目标容器第0行的第6列开始查找填充位置。在填充了第一个元素D1之后，目标容器的已填充行数rowSpan将为4，从而，填充了元素D1的前6列空余行数为将0，后续6列空余行数为4，即gaps＝[0,0,0,0,0,0,4,4,4,4,4,4]。

之后，进行第二次填充区域的确定。在第二次确定填充区域时，目标元素为元素标识为1的元素(后文将称为元素D2)，其布局参数为{index:1,union:5,column:4,rowSpan:2}，可知，元素D2为2行、4列，此时目标容器的状态参数作为目标状态参数，其中，curRow为{span:0,index:6}，因此，可以确定目标单元网格为目标容器第0行的第6列的单元网格(即，图6A中的单元网格E1)，本次应从目标容器第0行的第6列开始填充，基于目标状态参数可知在当前位置可以填充，进而，基于元素D2的尺寸可确定目标填充区域的四个顶点依次为(10,0)、(10,2)、(6,2)、(6,0)，元素D2被填充到目标填充区域后，目标容器可以如图6B所示。此时，还存在未填充的元素，因此更新目标容器的状态参数为：

其中，curRow为{span:0,index:10}表示下一次填充从目标容器第0行的第10列开始查找填充位置。在填充了第二个元素D2之后，由于元素D2的行数小于已填充行数，目标容器的已填充行数rowSpan仍为4，从而，填充了元素D2的第6列至第9列空余行数为将变为2，后续2列空余行数仍为4，即gaps＝[0,0,0,0,0,0,2,2,2,2,4,4]。

之后，进行第三次填充区域的确定。在第三次确定填充区域时，目标元素为元素标识为2的元素(后文将称为元素D3)，其布局参数为{index:2,union:5,column:6,rowSpan:2}，可知，元素D3为2行、6列，此时目标容器的状态参数作为目标状态参数，其中，curRow为{span:0,index:10}，因此，可以确定目标单元网格为目标容器第0行的第10列的单元网格(即，图6B中的单元网格E2)，本次应从目标容器第0行的第10列开始填充。结合gaps＝[0,0,0,0,0,0,2,2,2,2,4,4]可知在第0行没有能够填充得下元素D3的位置，也就是当前位置不可以填充。因此，更新目标容器的状态参数中的curRow为{span:1,index:0}，结合gaps＝[0,0,0,0,0,0,2,2,2,2,4,4]可知目标单元网格为目标容器第1行的第10列的单元网格(即，图6B中的单元网格E3)，本次应从目标容器第1行的第10列开始填充。结合gaps＝[0,0,0,0,0,0,2,2,2,2,4,4]可知在第1行没有能够填充得下元素D3的位置，也就是当前位置不可以填充。因此，更新目标容器的状态参数中的curRow为{span:2,index:0}，结合gaps＝[0,0,0,0,0,0,2,2,2,2,4,4]可知目标单元网格为目标容器第3行的第6列的单元网格(即，图6B中的单元网格E4)，本次应从目标容器第2行的第6列开始填充。结合gaps＝[0,0,0,0,0,0,2,2,2,2,4,4]可知在第2行存在能够填充元素D3的位置，进而，基于元素D3的尺寸可确定目标填充区域的四个顶点依次为(12,2)、(12,4)、(6,4)、(6,2)，元素D3被填充到目标填充区域后，目标容器可以如图6C所示。此时，还存在未填充的元素，因此更新目标容器的状态参数为：

其中，curRow为{span:3,index:0}表示下一次填充从目标容器第3行的第0列开始查找填充位置。在填充了第三个元素D3之后，整个第2行被填满。

以此类推，即可确定各个元素的目标填充区域，进而，可以将元素分别填充到各自对应的目标填充区域。

在步骤13中，在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与目标关联对象关联的各元素在目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

在一种可能的实施方式中，步骤13中，根据与目标关联对象关联的各元素在目标容器中所处的位置，确定能够合并的元素，可以包括以下步骤，如图7所示：

在步骤71中，从与目标关联对象关联的元素中，确定待进行合并性识别的第一元素；

在步骤72中，针对第一元素，从与目标关联对象关联的元素中，确定能够与第一元素合并的元素；

在步骤73中，判断与目标关联对象关联的元素中是否存在未进行过合并性识别的元素；

若经步骤73确定存在未进行过合并性识别的元素，执行步骤74；

在步骤74中，将未进行过合并性识别的元素作为新的第一元素，并再次执行步骤72，直至与目标关联对象关联的元素均进行过合并性识别。

其中，合并性识别用于确定能够相互合并的元素，也就是判断当前的第一元素是否能够与其他同样关联于目标关联对象的元素合并，以及，若能合并，有哪些元素可以合并。

通常情况下，对于关联于同一目标关联对象的元素，可以按照预设的规则进行合并性识别。例如，若元素标识为数字，可以按照元素标识从小到大的顺序依次进行识别。以前文中12个元素的布局参数为例，其中元素标识为0、1、2、3、4和5的这6个元素关联于同一关联对象5，因此，可以首先对元素标识为0的这一元素进行合并性识别，识别完毕后再从其中未进行过合并性识别的元素中选择元素标识最小的元素进行下一次合并行识别，直至关联与该目标关联对象的所有元素均进行过合并行识别。

在一种可能的实施方式中，步骤72可以包括以下步骤：

在与目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素；

确定能够覆盖第一元素和第二元素的整体的目标矩形区域；

若目标矩形区域除第一元素和第二元素外未与其他元素重叠，确定第一元素和第二元素能够合并；

若目标矩形区域除第一元素和第二元素外还覆盖与目标关联对象相关联的第三元素的整体，确定第一元素、第二元素和第三元素能够合并。

也就是说，在与目标关联对象关联的元素中，确定能够与当前第一元素合并的元素时，依次选取不同的第二元素进行。通常情况下，首先选取一个第二元素，以确定这一第二元素是否能够与第一元素合并。

以及，从与目标关联对象关联的元素中，确定能够与第一元素合并的元素，还可以包括以下步骤：

在确定第一元素和第二元素能够合并之后，或者，在确定第一元素、第二元素和第三元素能够合并之后，若在与目标关联对象关联的元素中，存在未作为第一元素的合并对象被选取过的备选元素，将备选元素作为除当前的第二元素外的新的第二元素，并再次执行确定能够覆盖第一元素和第二元素的整体的目标矩形区域的步骤，直至与目标关联对象关联的元素均作为第一元素的合并对象被选取过。

也就是说，在确定当前的第二元素能够与第一元素合并的情况下，在当前的第二元素的基础上，进一步增加一个新的元素作为第二元素的新增元素，以确定第一元素在能与当前的第二元素合并的基础上，是否能够与更多的元素合并。

此外，从与目标关联对象关联的元素中，确定能够与第一元素合并的元素，还可以包括以下步骤：

若目标矩形区域内除第一元素外还覆盖第三元素的局部，或者，若目标矩形区域内除第一元素外还覆盖未与目标关联对象相关联的第四元素，再次执行在与目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素的步骤，直至确定出能够与第一元素合并的元素。

也就是说，若目标矩形区域未能覆盖第三元素的整体而仅覆盖了局部，则还不能确定当前第一元素和第二元素是否能够合并，因此，可以重新选取第二元素进行新的尝试。在后续过程中，若当前第一元素与其他元素的合并能够覆盖当前第二元素的整体，则当前第一元素有机会能够与当前的第二元素合并。若目标矩形区域覆盖了未与目标关联对象相关联的元素，则当前第一元素无法与第二元素合并，需要重新选取第二元素进行新的尝试。

此外，本公开提供的方法还可以包括以下步骤：

若在与目标关联对象关联的元素均被作为第一元素的合并对象被选取过，且仍未确定出能与第一元素合并的元素，确定第一元素无法与其他元素合并。

也就是说，若某一个元素尝试与其他元素合并后，均无法合并，则说明没有能够与该元素合并的元素，可以确定该元素无法与其他元素合并，该元素不会合并，仍作为独立的元素个体。

并且，若与目标关联对象关联的元素中，存在未进行过合并性识别的元素，将元素作为新的第一元素，并再次执行步骤72，直至与目标关联对象关联的元素均进行过合并性识别。

图8A示出了元素填充完毕的目标容器，其中，“0-5”中0为元素标识、5为元素标识为0的这一元素所关联的关联对象。从图8中可以看出，元素标识为0、1、2、3、4、5的这些元素均与5这一关联对象相关联，其他同理。在后续描述示例过程中，将以0-5表示与关联对象5相关联、且元素标识为0的元素。

假设当前目标关联对象为关联对象5，则在确定与关联对象5相关联的元素中哪些可以合并时，首先，可以将0-5这一元素作为第一元素，并以第一元素为基准，确定哪些元素可以与其合并。接下来，确定1-5为第二元素，可知能够覆盖二者的整体的目标矩形区域可以为如图8B中所示的阴影区域。该目标矩形区域内除第一元素0-5和第二元素1-5外，还覆盖了元素2-5的局部，可见，目标矩形区域覆盖了第三元素的局部，目前无法合并。因此，可以再次执行在与目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素的步骤，可选的有元素2-5、元素3-5、元素4-5和元素5-5。

接下来，按照预设顺序，可以选择元素2-5为新的第二元素，可知能够覆盖二者的整体的目标矩形区域可以为如图8C中所示的阴影区域。该目标矩形区域内除第一元素0-5和第二元素2-5外，还覆盖了元素1-5的整体，而元素1-5也与关联对象5相关联，相当于覆盖了第三元素的整体。因此，可以确定元素0-5、元素1-5和元素2-5能够合并，其中，元素1-5即为第三元素。

此时，还剩元素3-5、元素4-5和元素5-5未确定能否与第一元素0-5合并。则下一步，可以将元素3-5这一元素作为新增的第二元素，即，确定元素0-5、元素1-5、元素2-5和元素3-5是否能够合并。基于几者的位置，可以确定能够覆盖这几者的目标矩形区域为如图8D中所示的阴影区域。该目标矩形区域内除第一元素和第二元素外，还覆盖了元素4-5、元素5-5、元素6-4和元素7-6的整体，可见，目标矩形区域覆盖了与关联对象4关联的元素和与关联对象6关联的元素，相当于覆盖了第四元素，目前无法合并。因此，可以再次执行在与目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素的步骤，以在后续分别确定元素0-5、元素1-5、元素2-5是否能够与元素4-5或者元素5-5合并。由图可知，元素4-5和元素5-5的情况与此类似，均无法合并，因此，可以确定能够与元素0-5合并的有元素1-5和元素2-5。

此时，还存在元素3-5、4-5和5-5未合并。那么，接下来可以以元素3-5为第一元素，继续确定能够与元素3-5合并的元素。首先，可以确定元素4-5为第二元素，可以确定目标矩形区域为如图8E中所示的阴影区域。该目标矩形区域内除第一元素3-5和第二元素4-5外没有其他的重叠元素，因此，可以确定元素3-5和元素4-5可以合并。

此时，剩下元素5-5还未确定能否与第一元素3-5合并。则下一步，可以将元素5-5作为新增的第二元素，即，确定元素3-5、4-5和5-5是否能够合并。基于几者的位置，可以确定能够覆盖这几者的目标矩形区域为如图8F所示的阴影区域，该目标矩形区域内除第一元素和第二元素外，还覆盖了元素7-6，可见，目标矩形区域覆盖了与关联对象6关联的第四元素，目前无法合并。并且，已经没有其他的元素可以作为新的第二元素，从而，可以确定能够与元素3-5合并的有元素4-5。

此时，还存在元素5-5未与其他元素合并，而元素5-5与其他5个元素试图合并均未成功，则元素5-5无法与其他元素合并，仍然是独立的元素。至此，针对目标关联对象5，其关联的元素中能够合并的元素均已确定出来。

按照上述方式，可以确定出与目标关联对象的元素中，有哪些元素是能够合并的。从而，针对每一目标关联对象，均进行上述操作，可以确定出目标容器中有哪些元素是可以合并的。继而，可以对能够合并的元素进行合并。

其中，对能够合并的元素进行合并，可以包括以下步骤：

针对每一组能够合并的元素，将该组能够合并的元素合并至目标区域中。

其中，目标区域为能够覆盖该组能够合并的元素的整体的矩形区域。

也就是说，对于每一组能够合并的元素，确定能够覆盖这一组能够合并的元素的整体的矩形区域，作为目标区域，并将目标区域作为这一组元素合并后所占据的区域。

需要说明的是，对于同一个关联对象，可以存在多组能够合并的元素，这些元素将以组为单位各自进行合并，互不影响。例如，以图8A中与关联对象5关联的6个元素，经合并性识别可知，元素0-5、元素1-5和元素2-5能够合并，且元素3-5和元素4-5能够合并，则分别对这两组进行合并。即，将元素0-5、元素1-5和元素2-5合并为如图8C中阴影区域所示的形式，将元素3-5和元素4-5合并为如图8E中阴影区域所示的形式。

在实际应用场景中，用于设置互动素材可编辑属性的页面可以如图9所示，以“尺寸”这一互动素材为例，其中包含多个元素，例如示意图M1、描述文字信息M2、替换设置项M3、重置尺寸设置项M4、宽度M5及高度M6这些元素，其中，M1、M2、M3和M4合并，M5与M6合并，从而，示意图、描述文字信息、替换设置项和重置尺寸设置项这几者可以通过一个勾选项N1设置其可编辑属性，宽度和高度这两者也可以通过一个勾选项N2统一设置其可编辑属性。

从而，互动素材无需再以组为单位进行可编辑属性的设置，设置自由度提高，同时，相互关联的元素在合适的情况下得以合并，并能对合并的元素进行统一设置，无需针对每一个单一元素进行设置，设置效率提高。

通过上述技术方案，从网格布局代码中提取待填充的元素的布局参数，并根据元素的布局参数将各个元素填充至目标容器，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸，以及，在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与目标关联对象关联的各元素在目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。由此，以网格布局为基础，将元素填充到目标容器中后，对于关联有同一关联对象的多个元素，根据这些元素在网格布局中所处的位置，对其中能够合并的部分元素适应性地进行合并。从而，对于关联同一对象的元素，以元素为单位进行合并，同时，对于已合并的元素，还能以合并得到的结果为单位对其中包含的元素属性统一进行设置，这样，既能够提升元素设置的灵活性及精细程度，又不会导致开发人员工作量的过度增加。

图10是根据本公开的一种实施方式提供的页面元素布局装置的框图。

如图10所示，该装置100可以包括：

参数提取模块1001，用于从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；

填充模块1002，用于根据所述元素的布局参数，将各个元素填充至目标容器；

合并模块1003，用于在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

可选地，所述填充模块1002，包括：

第一获取子模块，用于根据所述元素标识，从待填充元素中获取本次确定填充区域的目标元素；

第二获取子模块，用于获取所述目标容器当前的状态参数，作为目标状态参数，其中，所述目标容器为网格容器，目标容器的状态参数包括所述目标容器的已填充行数、已填充列数、优先填充行信息和目标容器内已填充行的每列空余行数，所述优先填充行信息至少用于指示目标容器中最优先填充的目标行；

第一确定子模块，用于根据所述目标元素的元素尺寸和所述目标状态参数，确定所述目标元素的目标填充区域；

第一更新子模块，用于在确定出所述目标元素的目标填充区域后，若存在还未确定填充区域的元素，更新所述目标容器的状态参数，并触发所述第一获取子模块再次根据所述元素标识，从待填充元素中获取本次确定填充区域的目标元素，直至待填充的各元素均已确定出对应的目标填充区域；

填充子模块，用于将各个元素填充至该元素对应的目标填充区域中。

可选地，所述第一确定子模块，包括：

第二确定子模块，用于确定当前的目标状态参数对应的目标行中最优先填充的目标单元网格；

判断子模块，用于根据所述目标元素的元素尺寸和所述目标单元网格，判断所述目标元素能否在所述目标行填充；

第三确定子模块，用于若确定所述目标元素能够在所述目标行填充，将以所述目标单元网格为顶角网格、且尺寸与所述目标元素的元素尺寸一致的区域确定为所述目标填充区域。

可选地，所述目标单元网格根据所述目标容器内已填充行的每列空余行数确定。

可选地，所述目标元素的元素尺寸包括所述目标元素所占的行数和列数；

所述判断子模块，包括：

第四确定子模块，用于以所述目标单元网格所在列为起始列，确定所述目标行的空余列数；

第五确定子模块，用于若所述空余列数不小于所述目标元素所占的列数，确定所述目标元素能够在所述目标行填充；

第六确定子模块，用于若所述空余列数小于所述目标元素所占的列数，确定所述目标元素不能在所述目标行填充。

可选地，所述第一确定子模块，还包括：

第二更新子模块，用于若确定所述目标元素不能在所述目标行填充，将当前目标行的下一行确定为新的目标行，以更新所述目标状态参数，并触发所述第二确定子模块再次确定当前的目标状态参数对应的目标行中最优先填充的目标单元网格，直至确定所述目标填充区域。

可选地，所述合并模块1003，包括：

第七确定子模块，用于从与所述目标关联对象关联的元素中，确定待进行合并性识别的第一元素，所述合并性识别用于确定能够相互合并的元素；

第八确定子模块，用于针对所述第一元素，从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素；

第三更新子模块，用于若与所述目标关联对象关联的元素中，存在未进行过合并性识别的元素，将所述元素作为新的第一元素，并触发所述第八确定子模块再次针对所述第一元素，从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素，直至与所述目标关联对象关联的元素均进行过合并性识别。

可选地，所述第八确定子模块，包括：

选取子模块，用于在与所述目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素；

第九确定子模块，用于确定能够覆盖所述第一元素和所述第二元素的整体的目标矩形区域；

第十确定子模块，用于若所述目标矩形区域除所述第一元素和所述第二元素外未与其他元素重叠，确定所述第一元素和所述第二元素能够合并；

第十一确定子模块，用于若所述目标矩形区域除所述第一元素和所述第二元素外还覆盖与所述目标关联对象相关联的第三元素的整体，确定所述第一元素、所述第二元素和所述第三元素能够合并。

可选地，所述第八确定子模块，还包括：

第四更新子模块，用于在确定所述第一元素和所述第二元素能够合并之后，或者，在确定所述第一元素、所述第二元素和所述第三元素能够合并之后，若在与所述目标关联对象关联的元素中，存在未作为所述第一元素的合并对象被选取过的备选元素，将所述备选元素作为除当前的第二元素外的新的第二元素，并触发所述第九确定子模块再次确定能够覆盖所述第一元素和所述第二元素的整体的目标矩形区域，直至与所述目标关联对象关联的元素均作为所述第一元素的合并对象被选取过。

可选地，所述第八确定子模块，还包括：

第五更新子模块，用于若所述目标矩形区域内除所述第一元素外还覆盖所述第三元素的局部，或者，若所述目标矩形区域内除所述第一元素外还覆盖未与所述目标关联对象相关联的第四元素，触发所述选取子模块再次在与所述目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素，直至确定出能够与所述第一元素合并的元素。

可选地，所述合并模块1003还包括：

第十二确定子模块，用于若在与所述目标关联对象关联的元素均被作为所述第一元素的合并对象被选取过，且仍未确定出能与所述第一元素合并的元素，确定所述第一元素无法与其他元素合并。

可选地，所述合并模块1003，包括：

合并子模块，用于针对每一组能够合并的元素，将该组能够合并的元素合并至目标区域中，所述目标区域为能够覆盖该组能够合并的元素的整体的矩形区域。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

下面参考图11，其示出了适于用来实现本公开实施例的电子设备600的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图11示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图11所示，电子设备600可以包括处理装置(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有电子设备600操作所需的各种程序和数据。处理装置601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。

通常，以下装置可以连接至I/O接口605：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置606；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备600与其他设备进行无线或有线通信以交换数据。虽然图11示出了具有各种装置的电子设备600，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从ROM 602被安装。在该计算机程序被处理装置601执行时，执行本公开实施例的方法中限定的上述功能。

需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

在一些实施方式中，客户端可以利用诸如HTTP(HyperText Transfer Protocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“LAN”)，广域网(“WAN”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；根据所述元素的布局参数，将各个元素填充至目标容器；在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言——诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定，例如，参数提取模块还可以被描述为“从网格布局代码中提取待填充的元素的布局参数的模块”。

本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上***(SOC)、复杂可编程逻辑设备(CPLD)等等。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行***、装置或设备使用或与指令执行***、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体***、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述方法包括：

从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；

根据所述元素的布局参数，将各个元素填充至目标容器；

在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述根据所述元素的布局参数，将各个元素填充至目标容器，包括：

根据所述元素标识，从待填充元素中获取本次确定填充区域的目标元素；

获取所述目标容器当前的状态参数，作为目标状态参数，其中，所述目标容器为网格容器，目标容器的状态参数包括所述目标容器的已填充行数、已填充列数、优先填充行信息和目标容器内已填充行的每列空余行数，所述优先填充行信息至少用于指示目标容器中最优先填充的目标行；

根据所述目标元素的元素尺寸和所述目标状态参数，确定所述目标元素的目标填充区域；

在确定出所述目标元素的目标填充区域后，若存在还未确定填充区域的元素，更新所述目标容器的状态参数，并再次执行所述根据所述元素标识，从待填充元素中获取本次确定填充区域的目标元素的步骤，直至待填充的各元素均已确定出对应的目标填充区域；

将各个元素填充至该元素对应的目标填充区域中。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述根据所述目标元素的元素尺寸和所述目标状态参数，确定所述目标元素的目标填充区域，包括：

确定当前的目标状态参数对应的目标行中最优先填充的目标单元网格；

根据所述目标元素的元素尺寸和所述目标单元网格，判断所述目标元素能否在所述目标行填充；

若确定所述目标元素能够在所述目标行填充，将以所述目标单元网格为顶角网格、且尺寸与所述目标元素的元素尺寸一致的区域确定为所述目标填充区域。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述目标单元网格根据所述目标容器内已填充行的每列空余行数确定。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述目标元素的元素尺寸包括所述目标元素所占的行数和列数；

所述根据所述目标元素的元素尺寸和所述目标单元网格，判断所述目标元素能否在所述目标行填充，包括：

以所述目标单元网格所在列为起始列，确定所述目标行的空余列数；

若所述空余列数不小于所述目标元素所占的列数，确定所述目标元素能够在所述目标行填充；

若所述空余列数小于所述目标元素所占的列数，确定所述目标元素不能在所述目标行填充。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述根据所述目标元素的元素尺寸和所述目标状态参数，确定所述目标元素的目标填充区域，还包括：

若确定所述目标元素不能在所述目标行填充，将当前目标行的下一行确定为新的目标行，以更新所述目标状态参数，并再次执行所述确定当前的目标状态参数对应的目标行中最优先填充的目标单元网格的步骤，直至确定所述目标填充区域。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，包括：

从与所述目标关联对象关联的元素中，确定待进行合并性识别的第一元素，所述合并性识别用于确定能够相互合并的元素；

针对所述第一元素，从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素；

若与所述目标关联对象关联的元素中，存在未进行过合并性识别的元素，将所述元素作为新的第一元素，并再次执行所述针对所述第一元素，从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素的步骤，直至与所述目标关联对象关联的元素均进行过合并性识别。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素，包括：

在与所述目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素；

确定能够覆盖所述第一元素和所述第二元素的整体的目标矩形区域；

若所述目标矩形区域除所述第一元素和所述第二元素外未与其他元素重叠，确定所述第一元素和所述第二元素能够合并；

若所述目标矩形区域除所述第一元素和所述第二元素外还覆盖与所述目标关联对象相关联的第三元素的整体，确定所述第一元素、所述第二元素和所述第三元素能够合并。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素，还包括：

在确定所述第一元素和所述第二元素能够合并之后，或者，在确定所述第一元素、所述第二元素和所述第三元素能够合并之后，若在与所述目标关联对象关联的元素中，存在未作为所述第一元素的合并对象被选取过的备选元素，将所述备选元素作为除当前的第二元素外的新的第二元素，并再次执行确定能够覆盖所述第一元素和所述第二元素的整体的目标矩形区域的步骤，直至与所述目标关联对象关联的元素均作为所述第一元素的合并对象被选取过。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素，还包括：

若所述目标矩形区域内除所述第一元素外还覆盖所述第三元素的局部，或者，若所述目标矩形区域内除所述第一元素外还覆盖未与所述目标关联对象相关联的第四元素，再次执行在与所述目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素的步骤，直至确定出能够与所述第一元素合并的元素。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述方法还包括：

若在与所述目标关联对象关联的元素均被作为所述第一元素的合并对象被选取过，且仍未确定出能与所述第一元素合并的元素，确定所述第一元素无法与其他元素合并。

根据本公开的一个或多个实施例，提供了一种页面元素布局方法，所述对能够合并的元素进行合并，包括：

针对每一组能够合并的元素，将该组能够合并的元素合并至目标区域中，所述目标区域为能够覆盖该组能够合并的元素的整体的矩形区域。

根据本公开的一个或多个实施例，提供了一种页面元素布局装置，所述装置包括：

参数提取模块，用于从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；

填充模块，用于根据所述元素的布局参数，将各个元素填充至目标容器；

合并模块，用于在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

根据本公开的一个或多个实施例，提供了一种计算机可读介质，其上存储有计算机程序，该程序被处理装置执行时实现本公开任意实施例所述的页面元素布局方法的步骤。

根据本公开的一个或多个实施例，提供了一种电子设备，包括：

存储装置，其上存储有计算机程序；

处理装置，用于执行所述存储装置中的所述计算机程序，以实现本公开任意实施例所述的页面元素布局方法的步骤。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。

尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

Claims (15)

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

从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；

根据所述元素的布局参数，将各个元素填充至目标容器；

在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

2.根据权利要求1所述的方法，其特征在于，所述根据所述元素的布局参数，将各个元素填充至目标容器，包括：

根据所述元素标识，从待填充元素中获取本次确定填充区域的目标元素；

获取所述目标容器当前的状态参数，作为目标状态参数，其中，所述目标容器为网格容器，目标容器的状态参数包括所述目标容器的已填充行数、已填充列数、优先填充行信息和目标容器内已填充行的每列空余行数，所述优先填充行信息至少用于指示目标容器中最优先填充的目标行；

根据所述目标元素的元素尺寸和所述目标状态参数，确定所述目标元素的目标填充区域；

在确定出所述目标元素的目标填充区域后，若存在还未确定填充区域的元素，更新所述目标容器的状态参数，并再次执行所述根据所述元素标识，从待填充元素中获取本次确定填充区域的目标元素的步骤，直至待填充的各元素均已确定出对应的目标填充区域；

将各个元素填充至该元素对应的目标填充区域中。

3.根据权利要求2所述的方法，其特征在于，所述根据所述目标元素的元素尺寸和所述目标状态参数，确定所述目标元素的目标填充区域，包括：

确定当前的目标状态参数对应的目标行中最优先填充的目标单元网格；

根据所述目标元素的元素尺寸和所述目标单元网格，判断所述目标元素能否在所述目标行填充；

若确定所述目标元素能够在所述目标行填充，将以所述目标单元网格为顶角网格、且尺寸与所述目标元素的元素尺寸一致的区域确定为所述目标填充区域。

4.根据权利要求3所述的方法，其特征在于，所述目标单元网格根据所述目标容器内已填充行的每列空余行数确定。

5.根据权利要求3所述的方法，其特征在于，所述目标元素的元素尺寸包括所述目标元素所占的行数和列数；

所述根据所述目标元素的元素尺寸和所述目标单元网格，判断所述目标元素能否在所述目标行填充，包括：

以所述目标单元网格所在列为起始列，确定所述目标行的空余列数；

若所述空余列数不小于所述目标元素所占的列数，确定所述目标元素能够在所述目标行填充；

若所述空余列数小于所述目标元素所占的列数，确定所述目标元素不能在所述目标行填充。

6.根据权利要求3所述的方法，其特征在于，所述根据所述目标元素的元素尺寸和所述目标状态参数，确定所述目标元素的目标填充区域，还包括：

若确定所述目标元素不能在所述目标行填充，将当前目标行的下一行确定为新的目标行，以更新所述目标状态参数，并再次执行所述确定当前的目标状态参数对应的目标行中最优先填充的目标单元网格的步骤，直至确定所述目标填充区域。

7.根据权利要求1所述的方法，其特征在于，所述根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，包括：

从与所述目标关联对象关联的元素中，确定待进行合并性识别的第一元素，所述合并性识别用于确定能够相互合并的元素；

针对所述第一元素，从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素；

若与所述目标关联对象关联的元素中，存在未进行过合并性识别的元素，将所述元素作为新的第一元素，并再次执行所述针对所述第一元素，从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素的步骤，直至与所述目标关联对象关联的元素均进行过合并性识别。

8.根据权利要求7所述的方法，其特征在于，所述从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素，包括：

在与所述目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素；

确定能够覆盖所述第一元素和所述第二元素的整体的目标矩形区域；

若所述目标矩形区域除所述第一元素和所述第二元素外未与其他元素重叠，确定所述第一元素和所述第二元素能够合并；

若所述目标矩形区域除所述第一元素和所述第二元素外还覆盖与所述目标关联对象相关联的第三元素的整体，确定所述第一元素、所述第二元素和所述第三元素能够合并。

9.根据权利要求8所述的方法，其特征在于，所述从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素，还包括：

在确定所述第一元素和所述第二元素能够合并之后，或者，在确定所述第一元素、所述第二元素和所述第三元素能够合并之后，若在与所述目标关联对象关联的元素中，存在未作为所述第一元素的合并对象被选取过的备选元素，将所述备选元素作为除当前的第二元素外的新的第二元素，并再次执行确定能够覆盖所述第一元素和所述第二元素的整体的目标矩形区域的步骤，直至与所述目标关联对象关联的元素均作为所述第一元素的合并对象被选取过。

10.根据权利要求8所述的方法，其特征在于，所述从与所述目标关联对象关联的元素中，确定能够与所述第一元素合并的元素，还包括：

若所述目标矩形区域内除所述第一元素外还覆盖所述第三元素的局部，或者，若所述目标矩形区域内除所述第一元素外还覆盖未与所述目标关联对象相关联的第四元素，再次执行在与所述目标关联对象关联的元素中，选取能够作为第一元素的合并对象的至少一个第二元素的步骤，直至确定出能够与所述第一元素合并的元素。

11.根据权利要求10所述的方法，其特征在于，所述方法还包括：

若在与所述目标关联对象关联的元素均被作为所述第一元素的合并对象被选取过，且仍未确定出能与所述第一元素合并的元素，确定所述第一元素无法与其他元素合并。

12.根据权利要求1所述的方法，其特征在于，所述对能够合并的元素进行合并，包括：

针对每一组能够合并的元素，将该组能够合并的元素合并至目标区域中，所述目标区域为能够覆盖该组能够合并的元素的整体的矩形区域。

13.一种页面元素布局装置，其特征在于，所述装置包括：

参数提取模块，用于从网格布局代码中提取待填充的元素的布局参数，其中，元素的布局参数包括元素标识、元素所关联的关联对象和元素尺寸；

填充模块，用于根据所述元素的布局参数，将各个元素填充至目标容器；

合并模块，用于在填充完毕后，针对每一关联有多于一个元素的目标关联对象，根据与所述目标关联对象关联的各元素在所述目标容器中所处的位置，确定能够合并的元素，并对能够合并的元素进行合并。

14.一种计算机可读介质，其上存储有计算机程序，其特征在于，该程序被处理装置执行时实现权利要求1-12中任一项所述方法的步骤。

15.一种电子设备，其特征在于，包括：

存储装置，其上存储有计算机程序；

处理装置，用于执行所述存储装置中的所述计算机程序，以实现权利要求1-12中任一项所述方法的步骤。