CN109375972B - 多元素布局的方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本发明涉及多元素布局的方法、装置、计算机设备和存储介质，应用于页面排版技术领域。所述方法包括：获取页面中被选中的多个类别的待布局元素，获取用户选中的推荐布局选项；将所述多个类别的待布局元素按照推荐布局选项进行布局，使得待布局元素按类别等距间隔的显示在页面中。本发明实施例解决了针对页面中多类别元素的布局效率低的问题，简化了用户操作，提高了页面元素布局效率。

Description

多元素布局的方法、装置、计算机设备和存储介质

技术领域

本发明涉及页面排版技术领域，特别是涉及多元素布局的方法、装置、计算机设备和存储介质。

背景技术

随着计算机技术的发展，人们越来越多的通过计算机设备定制自己专属的课件、会议PPT等电子演示文件。在实现本发明的过程中，发明人发现现有技术中存在如下问题，在电子演示文件中经常会涉及图片、文本甚至音视频等元素，用户在定制文件页面时，为了兼具内容以及页面美观性，经常需要对页面中的多种元素进行布局调整，例如希望按照文本统一显示在页面上方，图片统一显示在页面下方的排版方式进行页面元素布局；然而为了实现期望的效果，用户需要逐一去调整元素，或者逐一类别的调整元素。

因此，现有技术存在针对页面中多类别元素的布局效率低的问题。

发明内容

基于此，有必要针对现有方式针对页面中多类别元素的布局效率低的问题，提供一种多元素布局的方法、装置、计算机设备和存储介质。

根据本发明的第一方面，提供一种多元素布局的方法，包括：

接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素；

接收用于选择推荐布局选项的第二操作；

将所述待布局元素按照目标布局样式进行显示，使得所述待布局元素按类别等距间隔的显示在页面中；所述目标布局样式为目标布局选项中元素样本的布局样式，所述目标布局选项为所述第二操作选中的推荐布局选项。

在其中一个实施例中，所述接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，包括：

接收作用在页面中的区域选定操作，得到选定区域；

将所述选定区域中的元素，作为待布局元素。

在其中一个实施例中，所述使得待布局元素按类别等距间隔的显示在页面中，包括：

使得所述待布局元素按类别等距间隔的显示在页面中的目标区域；

所述目标区域为整个页面区域中的局部区域。

在其中一个实施例中，所述目标区域为页面中待布局元素的最小外包矩形区域；

或者，所述目标区域为所述选定区域。

在其中一个实施例中，所述将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中，包括：

若所述目标布局样式为左右布局/右左布局，则将所述待布局元素按照类别横向进行布局，布局后待布局元素按类别横向等距间隔的显示在页面中的目标区域；

若所述目标布局样式为上下布局/下上布局，则将所述待布局元素按照类别竖向进行布局，布局后待布局元素按类别竖向等距间隔的显示在页面中的目标区域。

在其中一个实施例中，所述将所述待布局元素按照类别横向进行布局，包括：

将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列；

将多个类别对应的多个元素列，从左到右/从右到右等距间隔显示在页面中的目标区域。

在其中一个实施例中，所述将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列，包括：

获取待布局元素中同一类别的待布局元素的数量；

根据所述数量，计算同一类别的待布局元素占据的列数；

将同一类别的待布局元素按列显示，得到元素列，所述元素列中包含对应列数的列。

在其中一个实施例中，所述接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，之后还包括：

将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；

所述将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列，包括：从所述数组中获取同一类别的待布局元素，将同一类别的待布局元素按列显示，得到同一类别对应的元素列。

在其中一个实施例中，所述将多个类别对应的多个元素列，从左到右/从右到右等距间隔显示在页面中的目标区域，包括：

获取元素列占据的列宽；所述列宽通过所述元素列包含的列数以及各列的宽度得出；

根据所述列宽，将多个元素列从左到右/从右到右等距间隔显示在页面中的目标区域。

在其中一个实施例中，所根据所述数量，计算同一类别的元素占据的列数，包括：

获取目标区域的高度，作为第一高度；

获取同一类别中各待布局元素的高度，作为第二高度；

根据第一高度、第二高度得到同一类别的元素占据的列数。

在其中一个实施例中，所述将同一类别的待布局元素按列显示，得到元素列，包括：

将同一类别的待布局元素按列显示，在当前列显示结束时，获取当前列中元素的最大宽度，作为当前列的宽度；

根据当前列的宽度确定下一列的起始位置，根据所述起始位置显示下一列；

以此类推，直到得到元素列。

在其中一个实施例中，还包括：

在目标区域的高度方向上，将所述元素列以居中方式显示；

和/或，

在各列的宽度方向上，将元素列中的各列元素以居中方式显示。

在其中一个实施例中，还包括：

若同一类别的待布局元素占据的列数为1，将所述同一类别的待布局元素以等距间隔方式显示成一列。

在其中一个实施例中，所述将所述待布局元素按类别竖向进行布局，包括：

将待布局元素中同一类别的待布局元素按行显示，得到同一类别对应的元素行；

将多个类别对应的多个元素行，从上到下/从下到上等距间隔显示在页面中的目标区域。

在其中一个实施例中，所述将待布局元素中同一类别的元素按行显示，得到同一类别对应的元素行，包括：

获取待布局元素中同一类别的待布局元素的数量；

根据所述数量，计算同一类别的待布局元素占据的行数；

将同一类别的待布局元素按行显示，得到元素行；所述元素行包含对应行数的行。

在其中一个实施例中，所述接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，之后还包括：

将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；

所述将待布局元素中同一类别的待布局元素按行显示，得到同一类别对应的元素行，包括：从数组中获取同一类别的待布局元素，将同一类别的元素按行显示，得到同一类别对应的元素行。

在其中一个实施例中，所述将多个类别对应的多个元素行，从上到下/从下到上等距间隔显示在页面中的目标区域，包括：

获取元素行占据的行高；所述行高通过所述元素行包含的行数以及各行的高度得出；

根据所述行高，将多个元素行从上到下/从下到上等距间隔显示在页面中的目标区域。

在其中一个实施例中，所根据所述数量，计算同一类别的待布局元素占据的行数，包括：

获取目标区域的宽度，作为第一宽度；

获取同一类别的待布局元素中各元素的宽度，作为第二宽度；

根据第一宽度、第二宽度得到同一类别的待布局元素占据的行数。

在其中一个实施例中，所述将同一类别的待布局元素按行显示，得到元素行，包括：

将同一类别的元素依次按行显示，在当前行显示结束时，获取当前行中元素的最大高度，作为当前行的高度；

根据当前行的高度确定下一行的起始位置，根据所述起始位置显示下一行；

以此类推，直到得到元素行。

在其中一个实施例中，还包括：

在目标区域的宽度方向上，将所述元素行以居中方式显示；

和/或，

在各行的高度方向上，将元素行中的各行元素以居中方式显示。

在其中一个实施例中，还包括：

若同一类别的待布局元素占据的行数为1，将所述同一类别的待布局元素以等距间隔方式显示成一行。

在其中一个实施例中，所述接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，之后还包括：

显示布局窗口，所述布局窗口中包括多个可选的推荐布局选项。

在其中一个实施例中，所述接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项，之后还包括：

关闭所述布局窗口。

在其中一个实施例中，所述待布局元素包含的元素类别包括文本、图像、音频、视频、flash中至少两项。

根据本发明的第二方面，提供一种多元素布局的装置，包括：

元素获取模块，用于接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素；

布局选项获取模块，用于接收用于选择推荐布局选项的第二操作；

布局处理模块，用于将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中；所述目标布局样式为目标布局选项中元素样本的布局样式，所述目标布局选项为所述第二操作选中的推荐布局选项。

在其中一个实施例中，所述元素获取模块包括：

区域获取单元，用于接收作用在页面中的区域选定操作，得到选定区域；

元素获取单元，用于将所述选定区域中的元素，作为待布局元素。

在其中一个实施例中，所述布局处理模块，具体用于将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中的目标区域；所述目标区域为整个页面区域中的局部区域。

在其中一个实施例中，所述布局处理模块包括：

第一布局单元，用于若所述目标布局样式为左右布局/右左布局，则将所述待布局元素按照类别横向进行布局，布局后待布局元素按类别横向等距间隔的显示在页面中的目标区域；

第二布局单元，用于若所述目标布局样式为上下布局/下上布局，则将所述待布局元素按照类别竖向进行布局，布局后待布局元素按类别竖向等距间隔的显示在页面中的目标区域。

在其中一个实施例中，所述第一布局单元包括：

第一处理子单元，用于将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列；

第二处理子单元，用于将多个类别对应的多个元素列，从左到右/从右到右等距间隔显示在页面中的目标区域。

在其中一个实施例中，所述第二布局单元包括：

第三处理子单元，用于将待布局元素中同一类别的待布局元素按行显示，得到同一类别对应的元素行；

第四处理子单元，用于将多个类别对应的多个元素行，从上到下/从下到上等距间隔显示在页面中的目标区域。

根据本发明的第三方面，提供一种计算机设备，包括存储器、具有触摸功能的显示屏以及处理器；所述存储器，用于存储计算机程序；当所述计算机程序被所述处理器执行时，使得所述处理器实现上述任一实施例的多元素布局的方法的步骤。

根据本发明的第四方面，提供一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述任一实施例的多元素布局的方法的步骤。

实施本发明提供的实施例，在需要进行多种类别元素的页面布局时，通过获取页面中被选中的多个类别的待布局元素，然后获取用户选中的推荐布局选项；进而可以将所述多个类别的待布局元素按照推荐布局选项表示的布局样式进行布局，使得待布局元素按类别等距间隔的显示在页面中。无需用户一一调整元素，也无需用户分别对每个类别元素进行布局调整，提高了多类别元素的布局效率。

附图说明

图1为一实施例的多元素布局的方法的示意性流程图；

图2为另一实施例的多元素布局的方法的示意性流程图；

图3A为一实施例的获取待布局元素的示意图；

图3B为一实施例的获取推荐布局选项的示意图；

图3C为图3A中待布局元素的布局结果的示意图；

图4A为另一实施例的获取待布局元素的示意图；

图4B为图4A中待布局元素的布局结果的示意图；

图5A为另一实施例的获取待布局元素的示意图；

图5B为图5A中待布局元素的布局结果的示意图；

图6A为又一实施例的获取待布局元素的示意图；

图6B为图6A中待布局元素的布局结果的示意图；

图7A为另一实施例中待布局元素的示意图；

图7B为另一实施例中待布局元素的布局结果的示意图；

图8为又一实施例的多元素布局的方法的示意性流程图；

图9为一实施例的待布局元素的布局结果的示意图；

图10为另一实施例的待布局元素的布局结果的示意图；

图11为一实施例的多元素布局的装置的示意性结构图；

图12为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。

本申请提供的多元素布局的方法，可以适用于一种计算技术设备，该计算机中设置有用于课件、会议PPT等电子演示文件制作的应用软件；此外，该计算技术设备内还可以安装有用户所需的其他各种应用程序，如文本编辑类应用程序、文稿演示类应用程序、即时通讯类应用程序、图像编辑类应用程序、社交类应用程序、电商类应用程序、搜索类应用程序、浏览器类应用程序等等。

可选的，电子演示文件制作的应用软件可以是预先安装在上述在该计算机设备中，也可以是在在该计算机设备启动之后，从第三方设备或服务器进行下载并安装使用。其中，第三方设备在实施例中不作限定。

具体地，该计算机设备可以是膝上型计算机、智能手机、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、交互智能平板、可穿戴设备、无人驾驶汽车、智能家居设备或者这些设备中的任意几种设备的组合。

在一个实施例中，如图1所示，提供了一种多元素布局的方法，以该方法可以应用于上述的计算机设备，包括以下步骤：

S110，接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素。

在本发明实施例中，元素包括但不限于文本、图像(包括形状和图片)、音频、视频、flash等等；待布局元素是用户在页面中选中的希望进行布局的元素。待布局元素包含多个类别的元素，可以理解为待布局元素包含文本、图像、音频、视频、flash中至少两种类别。

在一些实施例中，待布局元素可以是用户直接选中的页面元素，例如通过鼠标、触摸等方式先后点击页面中的多个元素进行选中。通过这种方式获取待布局元素，便于在多个页面元素中灵活选中部分元素作为待布局元素。

在其他一些实施例中，待布局元素也可以是选定区域内的页面元素，例如通过在页面中框选一个区域，则该区域内的全部元素均被选中；例如图2所示，在页面中框选一个矩形区域，该区域内包含6个元素，具体为3个文本、2个图形以及1个视频，将6个元素作为待布局元素；此外，还可以圈选一个区域，该圈选区域内的全部元素均被选中，作为待布局元素。通过这种批量方式选中多个页面元素，可以快速选中多个元素作，提高元素选中效率。

S120，接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项。

在一实施例中，在本步骤之前还需预先设置推荐布局选项，并在当前登陆用户对应的布局模板库中保存推荐布局选项。推荐布局选项可以设置一个或者多个，每个推荐布局选项代表一种布局样式，其中布局样式用于表示多个类别元素的整体显示效果，而非单个元素的局部显示效果，例如：布局样式可以是文本元素显示在图像元素上方，或者文本元素显示在图像元素左侧，或者文本元素显示在图像元素周围，或者文本元素、图像元素、视频元素等距间隔显示等等。

S130，将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中；所述目标布局样式为所述目标布局选项中元素样本的布局样式。

其中，将待布局元素按照推荐布局选项表示的布局样式进行布局，例如，若推荐布局选项表示的布局样式为左右布局，则将多个待布局元素按照类别横向进行布局，布局后待布局元素按类别横向等距间隔的显示在页面中(例如图4B、图5B、图6B、图7所示)；若推荐布局选项表示的布局样式为上下布局选项，则将多个待布局元素按照类别竖向进行布局，布局后待布局元素按类别竖向等距间隔的显示在页面中(例如图9所示)。

通过上述实施例的元素布局方法，在需要进行多种类别元素的页面布局时，通过获取页面中被选中的多个类别的待布局元素，然后获取用户选中的推荐布局选项；便可以将多个类别的待布局元素按照推荐布局选项表示的布局样式快速进行布局，使得待布局元素按类别等距间隔的显示在页面中。无需用户一一调整待布局元素，也无需用户分别对每个类别待布局元素进行布局调整，提高了多类别元素的布局效率。

在一些场景下，用户在选中待布局元素之后，希望将多个待布局元素在其原本所在区域内重新进行布局。为了实现相应相关，在一些实施例中，将多个待布局元素按照所述目标布局样式显示在页面中，是将多个待布局元素按照所述目标布局样式布局到页面中的目标区域；例如页面中待布局元素的最小外包矩形区域；例如图2所示，将多个待布局元素按照目标布局模板表示的元素布局样式显示在页面中的显示效果可以如图3C所示。此外，在一些场景下，目标区域还可以为页面中待布局元素对应的选定区域，或者整个页面区域。其中，待布局元素对应的选定区域，可以根据选定区域的左上角坐标和右下角坐标唯一确定。

在一些场景下，若目标区域内除了待布局元素之外，还包括其他元素时，待布局元素按照目标布局样式重新布局之后，可能出现元素叠加的情况；针对该问题，在一实施例中，控制待布局元素按照目标布局样式重新布局之后将显示在最顶层，以防止被其他元素遮挡。或者是，为了不影响其他元素的正常显示，预先检测布局后是否存在元素重叠，若有，则输出提示信息，供用户选择是否继续进行元素布局。

通过本发明上述实施例，可以在页面中的局部区域内进行元素布局，提高了页面定制的灵活性，有利于增强用户体验。

进一步地，在一个实施例中，如图2所示，以文本-图像左右布局为例，对将待布局元素按类别等距间隔的显示在页面中的具体实现过程进行说明；对应地，多元素布局的方法包括以下步骤：

S210，接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素。

关于本步骤的实现方式，可以参照上述实施例中步骤S110对应的部分。

在一具体示例中，获取到的待布局元素如图3A所示，包括3个文本元素和3个图像元素。

S220，显示布局窗口，所述布局窗口中包括多个可选的推荐布局选项。

用户选中待布局元素之后，可以自动触发***显示布局窗口，或者根据用户的操作指令显示布局窗口，布局窗口的显示效果例如图3B所示，布局窗口显示为一个小窗口，其中可以包含4个推荐布局选项。可以理解的，在其他实施例中，也可以将布局窗口显示在页面的其他位置。

在一些场景下，图3B示出的推荐布局选项中，“T”表示文本类别的元素，灰色矩形方块表示图像类别的元素。推荐布局选项1表示的布局样式为图像类别、文本类别的元素从左到右进行等间隔布局；推荐布局选项2表示的布局样式为文本类别、图像类别的元素从左到右进行等间隔布局；推荐布局选项3表示的布局样式为图像类别、文本类别的元素从上到下进行等间隔布局；推荐布局选项4表示的布局样式为图像类别、文本类别的元素从下到上进行等间隔布局。

在一些场景下，推荐布局选项表示的布局样式仅表示各类别的元素的相对位置关系，不限制各类别的元素的数量，例如，推荐布局选项4中，3个“T”和3个灰色矩形方块，“T”位于上方，灰色矩形方块位于下方，表示的布局样式为：文本类别的元素显示在上方，图像类别的元素的布局规则是显示在下方，但文本类别的元素和图像类别的元素的数量可以一个或者多个，不要求必须为3个。

S230，接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项。

在一实施例中，用户可以从布局窗口中选择需要的推荐布局选项作为目标布局选项。在一些场景下，还可以将选中的推荐布局选项进行突出显示，例如高亮显示、提示框显示等。

进一步地，在获取到用户选中的推荐布局选项之后，还可以关闭所述布局窗口。

本实施例中，假设用户通过图3B的布局窗口选择了文本-图像左右布局选项(即布局选项2)，程序会自动按照元素类别进行左右布局。

S240，将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列。

例如图3C所示，文本类元素按列显示在目标区域的左侧，构成文本元素列；图像类元素按列显示在目标区域的右侧，构成图像元素列。

S250，将多个类别对应的多个元素列，从左到右等距间隔显示在页面中的目标区域。

在一实施例中，在选中推荐布局选项之后，根据选中的推荐布局选项得到的目标布局样式中，可以包括信息：元素的类别，以及各类别的元素之间的相对位置关系。以图4中推荐布局选项1为例，可得到目标布局样式中包括信息：包含图像、文本两个类别，并且图像类别布局靠左，文本类别布局靠右。将待布局元素按照推荐布局选项1表示的布局样式进行布局的实现方式可以为：将待布局元素中图像类别的元素、文本类别的元素，按照从左到右的方式布局，使得其中图像类别的元素均显示在目标区域的左侧，文本类别的元素均显示在目标区域的右侧。

例如，用户在图3B的布局窗口中选择了布局选项2，程序会自动按照文本、图像进行左右布局，布局结果可以如图3C所示。

在一些场景下，如果待布局元素类别为3个以上，例如图4A所示，包括3个文本、3个图像、3个视频，则在用户选中文本-图像-视频的左右布局选项的情况下，也可以按照文本、图像、视频的类别从左到右的方式等距间隔布局，布局后的显示效果可以如图4B所示，其中L1、L2相等。

在一些场景下，如果各类别的待布局元素的数量不一致，例如图5A所示，包括3个文本、2个图像、1个视频，则在用户选中文本-图像-视频的左右布局选项的情况下，布局后的显示效果可以如图5B所示，其中L1、L2相等。

在一些场景下，如果待布局元素中某个类别中的某些待布局元素较宽，例如图6A所示，元素“文本2”相比于元素“文本1”和“文本3”较宽；则在用户选中文本-图像-视频左右布局选项的情况下，每类别的待布局元素可按照元素居中的方式显示，各类别待布局元素之间依然等距间隔显示，对应的显示效果可以如图6B所示，其中L1、L2相等。

在一些场景下，如果待布局元素中某个类别的待布局元素数量较多，例如图7A所示，包含3个文本、8个图像、1个视频，导致图像元素无法通过一列显示；在用户选中文本-图像-视频左右布局选项的情况下，对于数量较多的待布局元素，可以换列显示，显示为多列，但各类别待布局元素之间依然等距间隔显示，布局后的显示效果可以如图7B所示，其中L1、L2相等。

在一实施例中，步骤S240中，将同一类别的待布局元素按列显示的实现方式包括：获取待布局元素中同一类别的待布局元素的数量，根据所述数量计算同一类别的待布局元素占据的列数，将同一类别的待布局元素按列显示，得到包含对应列数的元素列(例如图7B中所示的元素列1、元素列2、元素列3)。为了将同一类别的待布局元素显示为元素列，在获取待布局元素之后，可以将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；然后从一个数组中获取同一类别的待布局元素并按列显示，得到同一类别对应的元素列。在一些场景中，当数组中有多个待布局元素时，还可以对数组中的多个待布局元素进行编号，可以采用数组下标作为对应待布局元素在数组中的编号；根据编号顺序从数组中获取同一类别的多个待布局元素，并按照编号依次按列显示，得到同一类别对应的元素列。

在一实施例中，步骤S250中，将多个类别对应的多个元素列从左到右等距间隔显示的实现方式可以包括：获取各个类别的元素列占据的列宽(如图7B中所示的列宽1、列宽2、列宽3)；所述列宽可以通过各个类别的待布局元素列包含的列数以及各列的宽度得出；根据所述列宽，将多个元素列从左到右等距间隔显示在页面中的目标区域，显示效果参考图7B所示，其中L1、L2相等。

其中，同一类别的元素占据的列数的计算方式可以包括：获取目标区域的高度(例如图7中所示的H)，作为第一高度；获取同一类别中各待布局元素的高度(例如图7中所示的h)，作为第二高度；根据第一高度、第二高度得到同一类别的待布局元素占据的列数。例如图7B所示的情况，通过计算可以得到图像类待布局元素所占的列数为2列，文本类元素所占的列数为1列。

在一实施例中，将同一类别的待布局元素显示为元素列的实现方式可以包括：将同一类别的待布局元素按列显示，在当前列显示结束时，获取当前列中元素的最大宽度，作为当前列的宽度；根据当前列的宽度确定下一列的起始位置，根据所述起始位置显示下一列；以此类推，直到得到元素列。例如图7B中，图像类元素对应的元素列在显示时，显示至“图像4”时第一列显示结束，获取第一列中元素的最大宽度(图7B中各元素宽度相等)，由此可以得到第一列的宽度，由此可以确定第二列元素的起始位置，即“图像5”的显示位置。

在一些场景下，若同一类别的待布局元素占据的列数为1列，则可以将该列元素以等距间隔方式显示，例如图7B中元素列1的三个文本元素等距间隔方式显示。

此外，在一些场景下，从左到右等距间隔显示待布局元素时，还可以在目标区域的高度方向上，将所述元素列以居中方式显示，例如图7B中的元素列2和元素列3，在目标区域的高度方向(即H方向)上为居中显示，即其中L3、L4相等，L5、L6相等。

进一步的，在一些场景下，在从左到右等距间隔显示待布局元素时，还可以在各列的宽度方向上，将元素列中的各列元素以居中方式显示，如图6B所示，三个文本类别元素，在元素列1中中线对齐。

下面以白板文件页面定制为例，从程序处理角度说明多类别元素布局的实现过程，可以将白板中承载元素的容器叫做画布。例如图7A所示，当用户在画布上框选出一个选定区域，以此选出多个待布局元素，可以获取到选定区域相对于画布的坐标和大小为一个矩形R(Px,Py,width,height)，然后获取到当前选中的所有待布局元素，按照待布局元素的类别存放在不同的数组中，比如Array1(text1、text2、text3...)，Array2(shape1、shape2、shape3...)，Array3(video1、video 2、video 3...)；接下来，针对每一类别的待布局元素，按照文本-图像-视频从上往下布局的方式，计算各类别待布局元素需要占据几列，并把每一列的待布局元素存储起来，然后根据列中的待布局元素，取最大宽度的待布局元素，作为该列的宽度，然后将当前类别的所有列的宽度相加，则为当前类别待布局元素的元素列所占宽度(即元素列的列宽)，参见图7B所示，由此得到元素列1、元素列2、元素列3的列宽。通过这种方式计算出每个类别的待布局元素的元素列和列宽，再按照文本-图像-视频进行从左往右依次等距间隔布局(例如图7B所示)。

可以理解的，对于右左布局选项的情况下，待布局元素按类别等距间隔的显示在页面中具体实现过程与上述左右布局选项的情况的实现原理类似，可参照上述左右布局的情况的实现过程，不作赘述。

在一实施例中，如图8所示，以上下布局为例，对待布局元素按类别等距间隔的显示在页面中具体实现过程进行说明，对应地，多元素布局的方法包括以下步骤：

S310，接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素。

关于本步骤的实现方式，可以参照上述实施例中步骤S110对应的部分。

S320，显示布局窗口，所述布局窗口中包括多个可选的推荐布局选项。

关于本步骤的实现方式，可以参照上述实施例中步骤S220对应的部分。

S330，接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项。

本实施例中，假设用户选择了文本-图像-视频上下布局选项，作为目标布局选项。

关于本步骤的实现方式，可以参照上述实施例中步骤S230对应的部分。

S340，将待布局元素中同一类别的待布局元素按行显示，得到同一类别对应的元素行。

例如图9、10所示，文本元素显示为元素行1，图像元素显示为元素行2，视频元素显示为元素行3。

S350，将多个类别对应的多个元素行，从上到下等距间隔显示在页面中的目标区域。

在一些场景下，如图5A所示，如果选中的待布局元素为3个文本、2个图像、1个视频，则在用户选中文本-图像-视频上下布局选项的情况下，对应的显示效果可以如图9所示，其中L1、L2相等。

在一些场景下，如果某个类别的待布局元素的数量较多，比如3个文本、8个图像、1个视频，导致无法通过一行显示，则可以如图10所示，在用户选中文本-图像-视频上下布局选项的情况下，对于数量较多的图像元素，可以换行显示，显示为多行，但各类别的待布局元素之间依然等距间隔显示，其中L1、L2相等。

其中，步骤S340的将同一类待布局元素显示为元素行的实现方式可以包括：获取待布局元素中同一类别的待布局元素的数量；根据所述数量，计算同一类别的待布局元素占据的行数；将同一类别的待布局元素按行显示，得到包含对应行数的元素行(例如图10所示的元素行1、元素行2、元素行3)。例如：在获取待布局元素之后，将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；然后从数组中获取同一类别的待布局元素，将同一类别的待布局元素按行显示，得到同一类别对应的元素行。在一些场景中，当数组中有多个待布局元素时，还可以对数组中的多个待布局元素进行编号，可以采用数组下标作为对应待布局元素在数组中的编号；根据编号顺序从数组中获取同一类别的多个待布局元素，并按照编号依次按行显示，得到同一类别对应的元素行。

在一实施例中，步骤S350中，不同类别的待布局元素等距间隔显示的实现方式可以为：获取元素行占据的行高(例如图10所示，元素行1的行高为行高1、元素行2的行高为行高2、元素行3的行高为行高3)；行高可以通过元素行包含的行数以及各行的高度得出；根据所述行高，将不同类别的待布局元素行从上到下等距间隔显示在页面中的目标区域。

其中，同一类别的待布局元素占据的行数的计算方式例如：获取目标区域的宽度(例如图10所示W)，作为第一宽度；获取同一类别的待布局元素中各元素的宽度(例如图10所示的w)，作为第二宽度；根据第一宽度、第二宽度得到同一类别的待布局元素占据的行数。

其中，将同一类别的待布局元素按行显示，得到元素行的具体实现方式可包括：将同一类别的待布局元素按行显示，在当前行显示结束时，获取当前行中元素的最大高度，作为当前行的高度；根据当前行的高度确定下一行的起始位置，根据所述起始位置显示下一行；以此类推，直到得到元素行。例如图10中，图像1～图像4作为第一行，在第一行显示结束时，可获取第一行的高度，由此确定第二行的起始位置，即“图像5”的显示位置。

在一些场景下，若同一类别的待布局元素占据的行数为1，将所述同一类别的待布局元素以等距间隔方式显示成一行，例如图10所示的元素行1，“文本1”、“文本2”、“文本3”等距间隔方式显示成一行。

此外，在一些场景下，在目标区域的宽度方向上，将所述元素行以居中方式显示，例如图10所示，元素行2和元素行3居中对齐，故L3、L4相等，L5、L6相等。

在一些场景下，在各行的高度方向上，还可以将元素行中的各行元素以居中方式显示，例如图10所示，元素行1中“文本1”、“文本2”、“文本3”的水平中线对齐。

可以理解的，对于下上布局的情况下，待布局元素按类别等距间隔的显示在页面中具体实现过程与上述上下布局的情况的实现方式原理类似，可参照上述上下布局的情况的实现过程，不作赘述。

应该理解的是，对于前述的各方法实施例，虽然流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，方法实施例的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

基于与上述实施例中的多元素布局的方法相同的思想，本文还提供多元素布局的装置。

在一个实施例中，如图11所示，本实施例的多元素布局的装置包括：元素获取模块501、布局选项获取模块502以及布局处理模块503，各模块详述如下：

元素获取模块501，用于接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素；

布局选项获取模块502，用于接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项；

布局处理模块503，用于将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中；所述目标布局样式为所述目标布局选项中元素样本的布局样式。

在一些实施例中，所述元素获取模块501，具体包括：

区域获取单元，用于接收作用在页面中的区域选定操作，得到选定区域；

元素获取单元，用于将所述选定区域中的元素，作为待布局元素。

在一些实施例中，所述布局处理模块503，具体用于将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中的目标区域；所述目标区域为整个页面区域中的局部区域。

进一步的，在一些实施例中，布局处理模块503包括：

第一布局单元，用于若所述目标布局样式为左右布局/右左布局，则将所述待布局元素按照类别横向进行布局，布局后待布局元素按类别横向等距间隔的显示在页面中的目标区域；

第二布局单元，用于若所述目标布局样式为上下布局/下上布局，则将所述待布局元素按照类别竖向进行布局，布局后待布局元素按类别竖向等距间隔的显示在页面中的目标区域。

其中，在一些实施例中，所述第一布局单元包括：

第一处理子单元，用于将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列；

第二处理子单元，用于将多个类别对应的多个元素列，从左到右/从右到右等距间隔显示在页面中的目标区域。

其中，在一些实施例中，第二布局单元包括：

第三处理子单元，用于将待布局元素中同一类别的待布局元素按行显示，得到同一类别对应的元素行；

第四处理子单元，用于将多个类别对应的多个元素行，从上到下/从下到上等距间隔显示在页面中的目标区域。

关于多元素布局的装置的具体限定可以参见上文中对于多元素布局的方法的限定，在此不再赘述。上述多元素布局的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

此外，上述示例的多元素布局的装置的实施方式中，各程序模块的逻辑划分仅是举例说明，实际应用中可以根据需要，例如出于相应硬件的配置要求或者软件的实现的便利考虑，将上述功能分配由不同的程序模块完成，即将所述多元素布局的装置的内部结构划分成不同的程序模块，以完成以上描述的全部或者部分功能。

在一个实施例中，提供了一种计算机设备，其内部结构图可以如图12所示。该计算机设备包括通过***总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，处理器用于提供计算和控制能力；存储器包括非易失性存储介质、内存储器，该非易失性存储介质存储有操作***和计算机程序，该内存储器为非易失性存储介质中的操作***和计算机程序的运行提供环境；网络接口用于与外部的终端通过网络连接通信；该计算机程序被处理器执行时以实现一种多元素布局的方法；显示屏可以是液晶显示屏或者电子墨水显示屏；输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图12中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器、显示屏以及处理器；所述存储器，用于存储计算机程序；当所述计算机程序被所述处理器执行时，使得所述处理器实现以下步骤：

接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素；接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项；将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中；所述目标布局样式为所述目标布局选项中元素样本的布局样式。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：接收作用在页面中的区域选定操作，得到选定区域；将所述选定区域中的元素，作为待布局元素。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：使得待布局元素按类别等距间隔的显示在页面中的目标区域；所述目标区域为整个页面区域中的局部区域。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：若所述目标布局样式为左右布局/右左布局，则将所述待布局元素按照类别横向进行布局，布局后待布局元素按类别横向等距间隔的显示在页面中的目标区域；若所述目标布局样式为上下布局/下上布局，则将所述待布局元素按照类别竖向进行布局，布局后待布局元素按类别竖向等距间隔的显示在页面中的目标区域。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列；将多个类别对应的多个元素列，从左到右/从右到右等距间隔显示在页面中的目标区域。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：获取待布局元素中同一类别的待布局元素的数量；根据所述数量，计算同一类别的待布局元素占据的列数；将同一类别的待布局元素按列显示，得到元素列，所述元素列中包含对应列数的列。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；从数组中获取同一类别的待布局元素，将同一类别的待布局元素按列显示，得到同一类别对应的元素列。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：获取元素列占据的列宽；所述列宽通过所述元素列包含的列数以及各列的宽度得出；根据所述列宽，将多个元素列从左到右/从右到右等距间隔显示在页面中的目标区域。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：获取目标区域的高度，作为第一高度；获取同一类别中各元素的高度，作为第二高度；根据第一高度、第二高度得到同一类别的元素占据的列数。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：将同一类别的待布局元素按列显示，在当前列显示结束时，获取当前列中元素的最大宽度，作为当前列的宽度；根据当前列的宽度确定下一列的起始位置，根据所述起始位置显示下一列；以此类推，直到得到元素列。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：在目标区域的高度方向上，将所述元素列以居中方式显示；和/或，在各列的宽度方向上，将元素列中的各列元素以居中方式显示。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：若同一类别的待布局元素占据的列数为1，将所述同一类别的元素以等距间隔方式显示成一列。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：将待布局元素中同一类别的待布局元素按行显示，得到同一类别对应的元素行；将多个类别对应的多个元素行，从上到下/从下到上等距间隔显示在页面中的目标区域。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：获取待布局元素中同一类别的待布局元素的数量；根据所述数量，计算同一类别的待布局元素占据的行数；将同一类别的待布局元素按行显示，得到元素行；所述元素行包含对应行数的行。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：

将不同类别的元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；从数组中获取同一类别的待布局元素，将同一类别的待布局元素按行显示，得到同一类别对应的元素行。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：获取元素行占据的行高；所述行高通过所述元素行包含的行数以及各行的高度得出；根据所述行高，将多个元素行从上到下/从下到上等距间隔显示在页面中的目标区域。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：获取目标区域的宽度，作为第一宽度；获取同一类别的元素中各元素的宽度，作为第二宽度；根据第一宽度、第二宽度得到同一类别的元素占据的行数。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：将同一类别的待布局元素依次按行显示，在当前行显示结束时，获取当前行中元素的最大高度，作为当前行的高度；根据当前行的高度确定下一行的起始位置，根据所述起始位置显示下一行；以此类推，直到得到元素行。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：在目标区域的宽度方向上，将所述元素行以居中方式显示；和/或，在各行的高度方向上，将元素行中的各行元素以居中方式显示

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：若同一类别的待布局元素占据的行数为1，将所述同一类别的元素以等距间隔方式显示成一行。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：在接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素之后，显示布局窗口，所述布局窗口中包括多个可选的推荐布局选项。

在一个实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现以下步骤：接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项之后，关闭所述布局窗口。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素；所述待布局元素包含多个类别的元素；接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项；将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中；所述目标布局样式为所述目标布局选项中元素样本的布局样式。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：接收作用在页面中的区域选定操作，得到选定区域；将所述选定区域中的元素，作为待布局元素。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：使得待布局元素按类别等距间隔的显示在页面中的目标区域；所述目标区域为整个页面区域中的局部区域。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：若所述目标布局样式为左右布局/右左布局，则将所述待布局元素按照类别横向进行布局，布局后待布局元素按类别横向等距间隔的显示在页面中的目标区域；

若所述目标布局样式为上下布局/下上布局，则将所述待布局元素按照类别竖向进行布局，布局后待布局元素按类别竖向等距间隔的显示在页面中的目标区域。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列；将多个类别对应的多个元素列，从左到右/从右到右等距间隔显示在页面中的目标区域。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：获取待布局元素中同一类别的待布局元素的数量；根据所述数量，计算同一类别的待布局元素占据的列数；将同一类别的待布局元素按列显示，得到元素列，所述元素列中包含对应列数的列。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；所述将待布局元素中同一类别的待布局元素按列显示，得到同一类别对应的元素列，包括：从数组中获取同一类别的待布局元素，将同一类别的待布局元素按列显示，得到同一类别对应的元素列。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：获取元素列占据的列宽；所述列宽通过所述元素列包含的列数以及各列的宽度得出；

根据所述列宽，将多个元素列从左到右/从右到右等距间隔显示在页面中的目标区域。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：获取目标区域的高度，作为第一高度；获取同一类别中各元素的高度，作为第二高度；根据第一高度、第二高度得到同一类别的元素占据的列数。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：将同一类别的待布局元素按列显示，在当前列显示结束时，获取当前列中元素的最大宽度，作为当前列的宽度；根据当前列的宽度确定下一列的起始位置，根据所述起始位置显示下一列；以此类推，直到得到元素列。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：在目标区域的高度方向上，将所述元素列以居中方式显示；和/或，在各列的宽度方向上，将元素列中的各列元素以居中方式显示。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：若同一类别的待布局元素占据的列数为1，将所述同一类别的待布局元素以等距间隔方式显示成一列。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：将待布局元素中同一类别的待布局元素按行显示，得到同一类别对应的元素行；将多个类别对应的多个元素行，从上到下/从下到上等距间隔显示在页面中的目标区域。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：获取待布局元素中同一类别的待布局元素的数量；根据所述数量，计算同一类别的待布局元素占据的行数；将同一类别的待布局元素按行显示，得到元素行；所述元素行包含对应行数的行。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；从数组中获取同一类别的待布局元素，将同一类别的待布局元素按行显示，得到同一类别对应的元素行。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：获取元素行占据的行高；所述行高通过所述元素行包含的行数以及各行的高度得出；根据所述行高，将多个元素行从上到下/从下到上等距间隔显示在页面中的目标区域。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：获取目标区域的宽度，作为第一宽度；获取同一类别的元素中各元素的宽度，作为第二宽度；根据第一宽度、第二宽度得到同一类别的元素占据的行数。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：将同一类别的待布局元素依次按行显示，在当前行显示结束时，获取当前行中元素的最大高度，作为当前行的高度；根据当前行的高度确定下一行的起始位置，根据所述起始位置显示下一行；以此类推，直到得到元素行。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：在目标区域的宽度方向上，将所述元素行以居中方式显示；和/或，在各行的高度方向上，将元素行中的各行元素以居中方式显示。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：若同一类别的待布局元素占据的行数为1，将所述同一类别的元素以等距间隔方式显示成一行。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：在接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素之后，显示布局窗口，所述布局窗口中包括多个可选的推荐布局选项。

在一个实施例中，该计算机程序被处理器执行时还实现以下步骤：接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项之后，关闭所述布局窗口。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。上述各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。

实施例中的术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或(模块)单元的过程、方法、***、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

实施例中提及的“第一\第二”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二”在允许的情况下可以互换特定的顺序或先后次序。应该理解“第一\第二”区分的对象在适当情况下可以互换，以使这里描述的实施例能够以除了在这里图示或描述的那些以外的顺序实施。

以上实施例仅表达了本发明的几种实施方式，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (27)

1.一种多元素布局的方法，其特征在于，包括：

接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，之后显示包括多个可选的推荐布局选项的布局窗口；所述待布局元素包含多个类别的元素；所述第一操作为作用在页面中的区域选定操作；每个所述推荐布局选项中包含至少两个类别元素的布局样式；

接收用于选择推荐布局选项的第二操作；

将所述待布局元素按照目标布局样式进行显示，使得所述待布局元素按类别等距间隔的显示在页面中的目标区域；所述目标布局样式为目标布局选项中元素样本的布局样式，所述目标布局选项为所述第二操作选中的推荐布局选项；所述布局样式用于表征各类别的元素的相对位置关系，不限制各类别的元素的数量；所述目标区域为页面中待布局元素的最小外包矩形区域或者所述区域选定操作对应的选定区域；

其中，所述将所述待布局元素按照目标布局样式进行显示，使得所述待布局元素按类别等距间隔的显示在页面中的目标区域，包括：

若所述目标布局样式为左右布局/右左布局，则针对每一类别的待布局元素，计算该类别待布局元素需占据的列宽，所述列宽通过该类别的待布局元素所占的列数以及各列的宽度得出；由此确定每个类别的待布局元素的列宽；最后将所述待布局元素按照类别横向进行布局，布局后所述待布局元素按类别横向等距间隔的显示在所述目标区域，不同类别元素之间横向等距间隔布局；

若所述目标布局样式为上下布局/下上布局，则针对每一类别的待布局元素，计算该类别待布局元素需占据的行高，所述行高通过该类别的待布局元素所占的行数以及各行的高度得出；由此确定每个类别的待布局元素的行高；最后将所述待布局元素按照类别竖向进行布局，布局后所述待布局元素按类别竖向等距间隔的显示在所述目标区域，不同类别元素之间竖向等距间隔布局。

2.根据权利要求1所述的方法，其特征在于，所述接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，包括：

接收作用在页面中的区域选定操作，得到选定区域；

将所述选定区域中的元素，作为待布局元素。

3.根据权利要求2所述的方法，其特征在于，

所述目标区域为页面中待布局元素的最小外包矩形区域；

或者，所述目标区域为所述选定区域。

4.根据权利要求1所述的方法，其特征在于，所述将所述待布局元素按照类别横向进行布局，包括：

将所述待布局元素中同一类别的待布局元素按列显示，得到所述同一类别对应的元素列；

将多个类别对应的多个所述元素列，从左到右/从右到右等距间隔显示在所述目标区域。

5.根据权利要求4所述的方法，其特征在于，所述将所述待布局元素中同一类别的待布局元素按列显示，得到所述同一类别对应的元素列，包括：

获取所述待布局元素中同一类别的待布局元素的数量；

根据所述数量，计算所述同一类别的待布局元素占据的列数；

将所述同一类别的待布局元素按列显示，得到元素列，所述元素列中包含对应列数的列。

6.根据权利要求4所述的方法，其特征在于，所述接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，之后还包括：

将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；

所述将待布局元素中同一类别的待布局元素按列显示，得到所述同一类别对应的元素列，包括：

从所述数组中获取同一类别的待布局元素，将所述同一类别的待布局元素按列显示，得到所述同一类别对应的元素列。

7.根据权利要求4所述的方法，其特征在于，所述将多个类别对应的多个所述元素列，从左到右/从右到右等距间隔显示在所述目标区域，包括：

获取所述元素列占据的列宽；所述列宽通过所述元素列包含的列数以及各列的宽度得出；

根据所述列宽，将多个所述元素列从左到右/从右到右等距间隔显示在页面中的目标区域。

8.根据权利要求5所述的方法，其特征在于，所根据所述数量，计算所述同一类别的待布局元素占据的列数，包括：

获取所述目标区域的高度，作为第一高度；

获取所述同一类别的待布局元素中各元素的高度，作为第二高度；

根据第一高度、第二高度得到所述同一类别的待布局元素占据的列数。

9.根据权利要求5所述的方法，其特征在于，所述将所述同一类别的待布局元素按列显示，得到元素列，包括：

将所述同一类别的待布局元素按列显示，在当前列显示结束时，获取当前列中元素的最大宽度，作为当前列的宽度；

根据所述当前列的宽度确定下一列的起始位置，根据所述起始位置显示下一列；

以此类推，直到得到元素列。

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

在所述目标区域的高度方向上，将所述元素列以居中方式显示；

和/或，

在各列的宽度方向上，将所述元素列中的各列元素以居中方式显示。

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

若所述同一类别的待布局元素占据的列数为1，将所述同一类别的待布局元素以等距间隔方式显示成一列。

12.根据权利要求1所述的方法，其特征在于，所述将所述待布局元素按类别竖向进行布局，包括：

将所述待布局元素中同一类别的待布局元素按行显示，得到所述同一类别对应的元素行；

将多个类别对应的多个所述元素行，从上到下/从下到上等距间隔显示在页面中的目标区域。

13.根据权利要求12所述的方法，其特征在于，所述将所述待布局元素中同一类别的待布局元素按行显示，得到所述同一类别对应的元素行，包括：

获取所述待布局元素中同一类别的待布局元素的数量；

根据所述数量，计算所述同一类别的待布局元素占据的行数；

将所述同一类别的待布局元素按行显示，得到元素行；所述元素行包含对应行数的行。

14.根据权利要求12所述的方法，其特征在于，所述接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，之后还包括：

将不同类别的待布局元素存储至不同的数组中，同一类别的待布局元素存储至同一数组中；

所述将所述待布局元素中同一类别的待布局元素按行显示，得到所述同一类别对应的元素行，包括：

从所述数组中获取同一类别的待布局元素，将所述同一类别的待布局元素按行显示，得到同一类别对应的元素行。

15.根据权利要求12所述的方法，其特征在于，所述将多个类别对应的多个所述元素行，从上到下/从下到上等距间隔显示在所述目标区域，包括：

获取所述元素行占据的行高；所述行高通过所述元素行包含的行数以及各行的高度得出；

根据所述行高，将多个所述元素行从上到下/从下到上等距间隔显示在所述目标区域。

16.根据权利要求13所述的方法，其特征在于，所述根据所述数量，计算所述同一类别的待布局元素占据的行数，包括：

获取所述目标区域的宽度，作为第一宽度；

获取所述同一类别的待布局元素中各元素的宽度，作为第二宽度；

根据第一宽度、第二宽度得到所述同一类别的待布局元素占据的行数。

17.根据权利要求13所述的方法，其特征在于，所述将所述同一类别的待布局元素按行显示，得到元素行，包括：

将所述同一类别的待布局元素依次按行显示，在当前行显示结束时，获取当前行中元素的最大高度，作为当前行的高度；

根据所述当前行的高度确定下一行的起始位置，根据所述起始位置显示下一行；

以此类推，直到得到元素行。

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

在所述目标区域的宽度方向上，将所述元素行以居中方式显示；

和/或，

在各行的高度方向上，将所述元素行中的各行元素以居中方式显示。

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

若所述同一类别的待布局元素占据的行数为1，将所述同一类别的待布局元素以等距间隔方式显示成一行。

20.根据权利要求1所述的方法，其特征在于，所述接收用于选择推荐布局选项的第二操作，将所述第二操作选中的推荐布局选项作为目标布局选项，之后还包括：关闭所述布局窗口。

21.根据权利要求1至20任一所述的方法，其特征在于，所述待布局元素包含的元素类别包括文本、图像、音频、视频、flash中至少两项。

22.一种多元素布局的装置，其特征在于，包括：

元素获取模块，用于接收用于选择页面中元素的第一操作，将所述第一操作选中的元素作为待布局元素，之后显示包括多个可选的推荐布局选项的布局窗口；所述待布局元素包含多个类别的元素；所述第一操作为作用在页面中的区域选定操作；每个所述推荐布局选项中包含至少两个类别元素的布局样式；

布局选项获取模块，用于接收用于选择推荐布局选项的第二操作；

布局处理模块，用于将所述待布局元素按照目标布局样式进行显示，使得待布局元素按类别等距间隔的显示在页面中的目标区域；所述目标布局样式为目标布局选项中元素样本的布局样式，所述目标布局选项为所述第二操作选中的推荐布局选项；所述布局样式用于表征各类别的元素的相对位置关系，不限制各类别的元素的数量；所述目标区域为页面中待布局元素的最小外包矩形区域或者所述区域选定操作对应的选定区域；

其中，所述将所述待布局元素按照目标布局样式进行显示，使得所述待布局元素按类别等距间隔的显示在页面中的目标区域，包括：

若所述目标布局样式为左右布局/右左布局，则针对每一类别的待布局元素，计算该类别待布局元素需要占据的列宽，所述列宽通过该类别的待布局元素所占的列数以及各列的宽度得出；由此确定每个类别的待布局元素的列宽；最后将所述待布局元素按照类别横向进行布局，布局后所述待布局元素按类别横向等距间隔的显示在所述目标区域；

若所述目标布局样式为上下布局/下上布局，则针对每一类别的待布局元素，计算该类别待布局元素需要占据的行高，所述行高通过该类别的待布局元素所占的行数以及各行的高度得出；由此确定每个类别的待布局元素的行高；最后将所述待布局元素按照类别竖向进行布局，布局后所述待布局元素按类别竖向等距间隔的显示在所述目标区域。

23.根据权利要求22所述的装置，其特征在于，所述元素获取模块包括：

区域获取单元，用于接收作用在页面中的区域选定操作，得到选定区域；

元素获取单元，用于将所述选定区域中的元素，作为待布局元素。

24.根据权利要求22所述的装置，其特征在于，其中，将所述待布局元素按照类别横向进行布局，包括：

将所述待布局元素中同一类别的待布局元素按列显示，得到所述同一类别对应的元素列；

第二处理子单元，用于将多个类别对应的多个所述元素列，从左到右/从右到右等距间隔显示在所述目标区域。

25.根据权利要求22所述的装置，其特征在于，其中，将所述待布局元素按照类别竖向进行布局，包括：

将所述待布局元素中同一类别的待布局元素按行显示，得到所述同一类别对应的元素行；

将多个类别对应的多个所述元素行，从上到下/从下到上等距间隔显示在所述目标区域。

26.一种计算机设备，包括存储器、显示屏以及处理器；所述存储器用于存储计算机程序；其特征在于，

当所述计算机程序被所述处理器执行时，使得所述处理器实现权利要求1至21任一所述方法的步骤。

27.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，当所述计算机程序被处理器执行时，使得所述处理器实现权利要求1至21任一所述方法的步骤。

Images