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

Abstract

本发明涉及多元素布局的方法、装置、计算机设备和存储介质，应用于页面排版技术领域。所述方法包括：通过获取页面中被选中的多个类别的待布局元素，然后接收用于选择自定义布局模板的操作，将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式；在目标布局模板中包含的元素样本的类别与待布局元素中包含的元素的类别一一对应，且各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。基于本发明实施例用户无需一一调整元素，也无需多次进行每个类别元素的布局调整，提高了针对多类别元素的布局效率。

Description

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

技术领域

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

背景技术

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

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

发明内容

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

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

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

接收用于选择自定义布局模板的第二操作；

将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式；所述目标布局模板为所述第二操作选择的自定义布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的类别一一对应，且目标布局模板中各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。

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

接收用于配置自定义布局模板的操作；

显示布局配置窗口；所述布局配置窗口用于配置自定义布局模板；

所述布局配置窗口包括可选元素样本区域以及配置区域；所述可选元素样本区域中包含多种类别的元素样本；所述配置区域为所述布局配置窗口中用于配置元素样本布局样式的区域。

在其中一个实施例中，所述方法还包括：

接收作用于所述可选元素样本区域的元素样本的选择操作；

在所述配置区域中添加被选择的元素样本；

接收作用于所述配置区域中的元素样本的移动操作；

在所述配置区域内移动目标元素样本，所述目标元素样本为所述移动操作事件针对的元素样本；

接收保存自定义布局模板的操作，保存通过所述布局配置窗口配置的自定义布局模板。

在其中一个实施例中，所述接收作用于所述可选元素样本区域的元素样本的选择操作，在所述配置区域中添加被选择的元素样本，包括：

接收作用于所述可选元素样本区域的元素样本的点击操作，在所述配置区域中添加被点击的元素样本。

在其中一个实施例中，所述保存通过所述布局配置窗口配置的自定义布局模板，包括：

获取所述配置区域中元素样本的布局样式；

根据所述布局样式生成自定义布局模板；

将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中。

在其中一个实施例中，所述获取配置区域中元素样本的布局样式，包括：

获取所述配置区域中元素样本的关联网格的第一分布信息；所述关联网格为所述配置区域中元素样本的最小外包矩形区域对应的网格；

获取所述配置区域中元素样本的第二分布信息，所述第二分布信息包括元素样本的数量、各元素样本的类别及其对应的网格信息；

根据所述第一分布信息以及所述第二分布信息，得到所述元素样本的布局样式。

在其中一个实施例中，所述将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中，包括：

将所述自定义布局模板按照xml格式保存至所述当前登陆用户对应的布局模板库。

在其中一个实施例中，所述布局配置窗口还包括模板列表区域；

在将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中之后还包括：

在所述模板列表区域中显示所述自定义布局模板的信息。

在其中一个实施例中，在将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中之后还包括：

关闭所述布局配置窗口。

在其中一个实施例中，所述获取待布局元素，包括：

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

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

在其中一个实施例中，所述将所述待布局元素按照目标布局样式显示在页面中，包括：

将所述待布局元素按照所述目标布局样式显示在页面中的目标区域；

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

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

或者，所述局部区域为所述选定区域。

在其中一个实施例中，所述将所述待布局元素按照目标布局样式显示在页面中的目标区域，包括：

将所述目标区域划分为多个子区；所述子区的分布与所述目标布局模板中元素样本的关联网格的分布一致；

所述关联网格为目标布局模板中所述元素样本的最小外包矩形区域对应的网格；

将所述待布局元素显示到所述多个子区，每个子区中显示的待布局元素的类别与所述目标布局模板中对应网格的元素样本的类别一致。

在其中一个实施例中，所述多个子区的尺寸相同。

在其中一个实施例中，在各子区中，将所述待布局元素以居中方式显示。

在其中一个实施例中，所述将所述待布局元素按照目标布局样式显示在页面中之前，还包括：

获取所述待布局元素的数量和类别；

判断所述目标布局模板包含的元素样本的类别和数量是否与待布局元素中包含的类别和数量对应，若是，将所述待布局元素按照目标布局样式显示在页面中。

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

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

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

事件检测模块，用于接收用于选择自定义布局模板的第二操作；

布局处理模块，用于将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式；所述目标布局模板为所述第二操作选择的自定义布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的类别一一对应，且目标布局模板中各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。

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

窗口显示模块，用于接收用于配置自定义布局模板的操作，显示布局配置窗口；所述布局配置窗口用于自定义所述目标布局模板；

所述布局配置窗口包括可选元素样本区域以及配置区域；

所述可选元素样本区域中包含多种类别的元素样本；所述配置区域为所述布局配置窗口中用于配置元素样本布局样式的区域。

在其中一个实施例中，所述装置还包括：

元素样本添加模块，用于接收作用于所述可选元素样本区域的元素样本的选择操作，在所述配置区域中添加被选择的元素样本；

元素样本移动模块，用于接收作用于所述配置区域中的元素样本的移动操作，在所述配置区域内移动目标元素样本，所述目标元素样本为所述移动操作事件针对的元素样本；

模板保存模块，用于接收保存自定义布局模板的操作，保存通过所述布局配置窗口配置的自定义布局模板。

在其中一个实施例中，所述模板保存模块进一步包括：

样式获取模块，用于获取所述配置区域中元素样本的布局样式；

模板生成模块，用于根据所述布局样式生成自定义布局模板；

模板保存模块，用于将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中。

在其中一个实施例中，所述样式获取模块，进一步包括：

第一分布获取单元，用于获取所述配置区域中元素样本的关联网格的第一分布信息；所述关联网格为所述配置区域中元素样本的最小外包矩形区域对应的网格；

第二分布获取单元，用于获取配置区域中元素样本的第二分布信息，所述第二分布信息包括元素样本的数量、各元素样本的类别及其对应的网格信息；

样式获取单元，用于根据所述第一分布信息以及所述第二分布信息，得到所述元素样本的布局样式。

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

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

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

在其中一个实施例中，所述布局处理模块，进一步用于将所述待布局元素按照目标布局样式显示在页面的目标区域；

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

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

子区划分单元，用于将目标区域划分为多个子区；所述子区的分布与所述目标布局模板中元素样本的关联网格的分布一致；所述关联网格为目标布局模板中全部元素样本的最小外包矩形区域对应的网格；

布局单元，用于将所述待布局元素分别显示到所述多个子区，并且子区中显示的元素的类别与目标布局模板中对应网格的元素样本的类别一致。

在其中一个实施例中，所述布局单元，进一步用于在各子区中，将待布局元素以居中方式显示。

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

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

实施本发明提供的实施例，在需要对页面中的多种类别元素进行页面布局时，通过获取页面中被选中的多个类别的待布局元素，然后获取与待布局元素的类别及数量均匹配的目标布局模板；进而可以将待布局元素按照目标布局模板中元素的布局样式显示在页面中；对于页面中多个不同类别的元素，无需用户一一调整元素，也无需用户分别针对每个类别元素进行布局调整，提高了多类别元素的页面布局效率。

附图说明

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

图2为一实施例的待布局元素的示意图；

图3为一实施例的布局模板的示意图；

图4A为图2的待布局元素按照图3的布局模板布局后的一种效果示意图；

图4B为图2的待布局元素按照图3的布局模板布局后的另一种效果示意图；

图5为一实施例的自定义布局模板的示意性流程图；

图6为一实施例的布局配置窗口的示意图；

图7为另一实施例的布局配置窗口的示意图；

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

图9为图8的待布局元素按照图7自定义的布局模板布局后的效果示意图；

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

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

具体实施方式

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

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

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

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

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

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

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

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

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

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

S120，接收用于选择自定义布局模板的第二操作。

在实施例中，用户可以预先配置自定义布局模板并保存；在自定义布局模板中可以包含多个元素样本，多个元素样本以某种样式布局；其中，元素样本指的是对应类别元素的示意，其不代表对应类别的元素本身。实际应用中，用户在定制页面时，可以添加到页面中的元素包括文本、图形、图像、视频等，对应的元素样本则包括文本元素样本、图形元素样本、图像元素样本、视频元素样本。例如图3所示的布局模板中，包含6个元素样本，具体为3个文本元素样本、2个图形元素样本以及1个视频元素样本。所述第二操作可以是点击、长按已有自定义布局模板中任意一个的操作。

S130，将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式；所述目标布局模板为所述用于选择自定义布局模板的第二操作选择的自定义布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的类别一一对应，且目标布局模板中各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。

本步骤中，与待布局元素匹配的目标布局模板需满足如下条件：目标布局模板中包含的元素样本的类别与待布局元素中包含的元素的类别一一对应，且各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。例如图2选出的待布局元素包含3个文本、2个图形以及1个视频，与其匹配的目标布局模板中，需要包含3个文本元素样本、2个图形元素样本以及1个视频元素样本，例如图3所示的布局模板。

在本发明实施例中，目标布局模板中元素样本的布局样式，可以理解为多个元素样本彼此之间的位置关系。上述实施例，即是将多个类别的待布局元素按照目标布局模板表示的布局样式进行显示，例如图2的待布局元素，在应用图3所示的目标布局模板之后，可得到如图4A所示的布局效果。

通过上述实施例的元素布局方法，在需要对多种类别的待布局元素进行页面布局时，可以选择预先配置的自定义布局模板，即选择与待布局元素的类别及数量均匹配的目标布局模板，进而可以快速地将多种类别的待布局元素按照目标布局模板表示的布局样式显示在页面中；无需用户一一调整元素，也无需用户分别对每个类别元素进行布局调整，提高了元素布局效率。

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

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

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

在一些实施例中，上述所述将所述待布局元素按照目标布局样式显示在页面中之前，还可以包括：

获取待布局元素的数量和类别；判断用户选择的自定义布局模板包含的元素样本的类别和数量是否与待布局元素中包含的类别和数量对应，若是，将所述待布局元素按照目标布局样式显示在页面中，若否，显示相应的提示信息，提醒用户选择的自定义布局模板与当前待布局元素不匹配。

在其他一些实施例中，在用户登陆之后，还可以配置自定义布局模板，并保存配置的自定义布局模板在用户账户对应的布局模板库中。

在一些场景中，参考图5所示，配置自定义布局模板的实现过程可以包括如下步骤：

S210，接收用于配置自定义布局模板的操作，在当前页面之上显示布局配置窗口，所述布局配置窗口用于配置自定义布局模板。

在一些场景中，布局配置窗口初始时的界面如图6所示，包括可选元素样本区域、配置区域以及模板列表区域。可选元素样本区域中包含多种类别的元素样本，例如包括文本、图形、图像、视频四种元素样本。用户点击其中的元素样本，则可以添加对应类别的元素样本到配置区域，例如用户点击可选元素样本区域中的图形元素样本，可在配置区域添加一个图形元素样本；用户点击可选元素样本区域中的文本元素样本，可在配置区域进一步添加一个文本元素样本；如果希望添加多个文本元素样本，可多次点击可选元素样本区域中的文本元素样本实现，也可以对配置区域中已有的文本元素样本进行复制和粘贴的方式实现。在配置区域添加元素样本之后的页面如图7所示。

对于配置区域中的元素样本，可以通过鼠标或者触摸方式移动，通过移动元素样本在配置区域的位置，可以将配置区域中的多个元素样本调整到用户希望的布局样式。

S220，基于布局配置窗口得到自定义的布局模板，具体包括：接收作用于所述可选元素样本区域的元素样本的选择操作；在所述配置区域中添加被选择的元素样本；接收作用于所述配置区域中的元素样本的移动操作；在所述配置区域内移动目标元素样本，所述目标元素样本为所述移动操作事件针对的元素样本；接收保存自定义布局模板的操作，保存通过所述布局配置窗口配置的自定义布局模板。

在一些场景中，将配置区域也称为画布，即在本发明实施例中，画布即上述的配置区域。参考图6所示，用户通过点击左侧可选元素样本区域中的元素样本，往中间的画布上增加元素样本，然后通过在画布上移动元素样本，直到达到自己期望的布局样式；然后点击页面中的“保存”控件，可以对当前配置的布局模板进行保存，例如保存为“模板四”；对应地，在配置区域右侧的自定义布局模板列表区域中将显示出新配置的自定义布局模板，即“模板四”。

继续参考图6和图7所示，画布上包含多个网格，基于网格方便用户配置元素样本的布局样式，例如方便用户对齐元素等。用户还可以根据实际需要调整画布上网格的数量，比如从九宫格变成十六宫格，或者从九宫格变成六宫格。

在保存画布上元素样本的布局样式时，可以记录各个元素样本的分布信息，分布信息包含元素样本的类别以及其在画布上对应的网格信息；通过画布上多个元素样本的分布信息，结合画布上元素样本的关联网格的分布信息，可确定出画布上多个元素样本确定的自定义布局模板。

如图7所示，画布上元素样本的关联网格即线框001内的网格，对各个关联网格设置有唯一的标识，通过该标识表示各关联网格在线框001内的位置；例如，用标识11表示位于线框001内左上角的第一个网格(即网格11)，用标识12表示位于网格11右侧的相邻网格(即网格12)，用标识21表示位于网格11下方的相邻网格(即网格21)，以此类推，根据这样的标识可得到画布上元素样本的关联网格的分布信息为2行3列的分布。

进一步地，记录画布上元素样本的分布信息，例如图7所示，画布上包括元素样本10～元素样本60，记录的分布信息可以如下：

元素样本10：形状，网格11；

元素样本20：文本，网格12；

元素样本30：形状，网格13；

元素样本40：文本，网格21；

元素样本50：形状，网格22；

元素样本60：文本，网格23；

由上述元素样本的分布信息，可以确定元素样本10～元素样本60各自的元素类别，以及各自对应的关联网格，结合上述方法得到的关联网格的分布信息，可以确定出画布上元素样本10～元素样本60所表示的布局样式，保存该布局样式得到自定义布局模板，且该自定义布局模板表示的布局样式即图7中元素样本10～元素样本60的布局样式。

在其他一些实施例中，如图7中，用户移动元素样本10在画布上的位置之后，元素样本10在落入网格33同时也落入网格34，则在确定元素样本10对应的网格信息时，可以将网格33确定为元素样本10对应的网格，由此记录元素样本10的网格信息；即当元素样本落入一个网格中的面积大于设定阈值(例如其总面积的一半)时，可将该网格确定为该元素样本对应的网格；通过这种方式，由此无需用户精确移动元素样本在画布上的位置，提高了配置自定义的布局模板的效率。

基于上述场景描述，在一实施例中，生成自定义布局模板的具体方式包括：获取配置区域中元素样本的布局样式；根据所述布局样式生成布局模板；将所述布局模板保存至所述当前登陆用户对应的布局模板库中。其中，获取配置区域中元素样本的布局样式的方式可以包括：获取配置区域中元素样本的关联网格的分布信息，作为第一分布信息(例如图7中线框001内的关联网格的2行、3列的分布信息)；获取配置区域中元素样本的分布信息，作为第二分布信息(例如图7中各元素样本的类型以及对应的网格标识)；所述第二分布信息包括元素样本的数量、各元素样本的类别及其对应的网格信息；根据所述第一分布信息以及第二分布信息，得到所述元素样本的布局样式。

S230，将自定义的布局模板按照xml格式保存至当前登陆用户对应的布局模板库。

在一实施例中，对于图7自定义的布局模板，可以采用xml格式保存如下信息：

画布水平方向的关联网格的数量；

画布垂直方向的关联网格的数量；

画布中元素样本的数量；

画布中各元素样本的分布信息，包括各元素样本类别和对应网格信息，对应网格信息通过两个参数X、Y表示，参数X表示元素样本所在网格的行信息，参数Y表示表示元素样本所在网格的列信息；此外，还可以包括各元素样本的编号信息。

此外，在生成并保存自定义布局模板之后，可以关闭布局配置窗口，便于执行待布局元素在页面中的显示。

通过布局配置窗口用户可以自定义多种形式的布局模板，基于自定义的布局模板可以实现选中的多种类别元素的快速布局。比如：图8为选出的待布局元素，应用图7中自定义的目标布局模板，将待布局元素在页面的目标区域进行显示，其过程包括：确定页面中的目标区域为待布局元素对应的选定区域，将该目标区域等分为2行3列，得到6个子区，将待布局元素分别显示在6个子区中，可以得到如图9所示的布局结果。

在一些场景下，将多个类别的待布局元素按照目标布局样式显示在目标区域，实现方式可以如下：将所述目标区域划分为多个子区；所述子区的分布与所述目标布局模板中元素样本的关联网格的分布一致；所述关联网格为目标布局模板中全部元素样本的最小外包矩形区域对应的网格。例如根据图7所示的目标布局模板，元素样本的关联网格即线框001覆盖的网格，基于此，可将目标区域划分为2行3列的子区，如图9所示，子区的分布与图7中线框001中网格分布一致。将多个待布局元素分别显示到目标区域的对应子区，使得任一子区中显示的待布局元素的类别与目标布局模板中对应网格的元素样本的类别一致。其中，无论目标区域的形状是否与目标布局模板中元素样本的关联网格区域的形状是否相同，均按照目标布局模板中元素样本的关联网格区域内网格的行数和列数，对目标区域进行划分，换句话说，目标区域的子区的形状，可以与目标布局模板中元素样本的关联网格的形状不同，但数量及排列均一致。在一实施例中，所述目标区域的多个子区的尺寸。

另外，将目标区域划分为多个子区时，子区可以是隐性的，即在页面中不会显示出子区，当然也可以是显性的，即在页面中显示出子区，即图4A、图4B所示的子区效果。

在应用自定义布局模板时，进一步的，还可以在目标区域的子区中将元素以居中方式显示；或者在目标区域的子区中将元素统一以其他方式显示。

通过上述实施例，如果用户选择的待布局元素不满足预先生成的自定义布局模板中元素样本的类别和数量规则，则无法应用已有布局模板；当用户配置完自定义布局模板并保存，该自定义布局模板会保存到用户账号对应的布局模板库中，这样用户在多个地方登陆账号，都可以同步获取到自己的自定义布局模板并使用；由此，用户无需一一调整元素，也无需分别对每个类别元素的进行布局调整，提高了多类别元素的页面布局效率。

进一步地，在一实施例中，获取多个待布局元素之后，将不同类别的待布局元素分别存储至不同的数组中，使得同一类别的待布局元素存储至同一数组中；在确定目标布局样式之后，对多个待布局元素按照目标布局样式进行快速布局的实现方式包括：从同一数组中读取同一类别的待布局元素；从所述目标布局样式中获取相同类别的元素样本对应网格信息；根据所述网格信息从所述多个子区中确定对应的子区；将所述同一类别的待布局元素显示到所述对应的子区。

在一个例子中，将所述同一类别的待布局元素显示到所述对应的子区的实现方式可以为:

一方面，在将不同类别的元素存储至不同的数组中时，还对数组中的元素进行编号，可以采用数组下标作为对应元素在数组中的编号；另一方面，在目标布局样式中还包括元素样本的编号信息；基于上述信息，在从同一数组中读取同一类别的待布局元素之后，还需获取读取到的待布局元素在所述数组中的编号；进而在将同一类别的待布局元素显示到对应的目标子区时，可以根据同一类别的待布局元素的编号与相同类别的元素样本的编号之间的对应关系，将同一类别的待布局元素显示到对应的目标子区。其中，同一类别的待布局元素的编号与相同类别的元素样本的编号之间的对应关系，可以是正序对应关系，即数值小的待布局元素的编号对应数值小的元素样本的编号，数值大的待布局元素的编号对应数值大的元素样本的编号；也可以是反序对应关系，即数值小的待布局元素的编号对应数值大的元素样本的编号，数值大的待布局元素的编号对应数值小的元素样本的编号；还可以是其他预先设定的对应关系。通过同一类别的待布局元素的编号与相同类别的元素样本的编号之间的对应关系进行元素布局，可以防止多个元素被现实到同一子区，避免出现布局混乱的问题。

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

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

在一个实施例中，如图10所示，本实施例的多元素布局的装置包括：元素获取模块401、事件检测模块402以及布局处理模块403，各模块详述如下：

其中，元素获取模块401，用于获取待布局元素；待布局元素为页面中被选中的元素，所述待布局元素包含多个类别的元素；

其中，事件检测模块402，用于接收用于选择自定义布局模板的操作；

其中，布局处理模块403，用于将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式；所述目标布局模板为所述用于选择自定义布局模板的操作选择的自定义布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的类别一一对应，且目标布局模板中各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。

在一实施例中，元素获取模块401，进一步包括：

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

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

在一实施例中，所述布局处理模块403，进一步用于将所述待布局元素按照目标布局样式显示在页面的目标区域，所述目标区域为整个页面区域中的局部区域，例如：待布局元素的最小外包矩形区域，或者待布局元素对应的选定区域。

在一实施例中，所述目标区域为所述选定区域。

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

子区划分单元，用于将目标区域划分为多个子区；所述子区的分布与所述目标布局模板中元素样本的关联网格的分布一致；所述关联网格为目标布局模板中全部元素样本的最小外包矩形区域对应的网格；

布局单元，用于将所述待布局元素分别显示到所述多个子区，并且子区中显示的元素的类别与目标布局模板中对应网格的元素样本的类别一致。

在一实施例中，上述布局单元进一步用于，在各子区中，将元素以居中方式显示。

在一实施例中，上述装置还包括：窗口显示模块，用于接收用于配置自定义布局模板的操作，显示布局配置窗口；所述布局配置窗口用于自定义所述目标布局模板；所述布局配置窗口包括可选元素样本区域以及配置区域；

所述可选元素样本区域中包含多种类别的元素样本；所述配置区域为所述布局配置窗口中用于配置元素样本布局样式的区域。

在一实施例中，所述装置还包括：

元素样本添加模块，用于接收作用于所述可选元素样本区域的元素样本的选择操作，在所述配置区域中添加被选择的元素样本；

元素样本移动模块，用于接收作用于所述配置区域中的元素样本的移动操作，在所述配置区域内移动目标元素样本，所述目标元素样本为所述移动操作事件针对的元素样本；

模板保存模块，用于接收保存自定义布局模板的操作，保存通过所述布局配置窗口配置的自定义布局模板。

在一实施例中，所述模板保存模块进一步包括：

样式获取模块，用于获取配置区域中元素样本的布局样式；

模板生成模块，用于根据所述布局样式生成目标布局模板；

模板保存模块，用于将所述目标布局模板保存至所述当前登陆用户对应的布局模板库中。

在一实施例中，所述样式获取模块，进一步包括：

第一分布获取单元，用于获取配置区域中元素样本的关联网格的第一分布信息；所述关联网格为所述配置区域中元素样本的最小外包矩形区域对应的网格；

第二分布获取单元，用于获取配置区域中元素样本的第二分布信息，所述第二分布信息包括元素样本的数量、各元素样本的类别及其对应的网格信息；

样式获取单元，用于根据所述第一分布信息以及第二分布信息，得到所述元素样本的布局样式。

在一实施例中，所述模板存储模块，具体用于将所述自定义布局模板按照xml格式保存至所述布局模板库。

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

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

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

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

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

获取待布局元素；待布局元素为页面中被选中的元素，所述待布局元素包含多个类别的元素；

获取与所述待布局元素匹配的布局模板，作为目标布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的元素的类别一一对应，且各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同；

将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式。

在一些实施例中，当所述计算机程序被所述处理器执行时，还使得所述处理器实现上述其他实施例的多元素布局的方法的步骤。

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

获取待布局元素；待布局元素为页面中被选中的元素，所述待布局元素包含多个类别的元素；

获取与所述待布局元素匹配的布局模板，作为目标布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的元素的类别一一对应，且各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同；

将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式。

在一些实施例中，该计算机程序被处理器执行时还实现上述其他实施例的多元素布局的方法的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(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 (28)

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

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

接收用于选择自定义布局模板的第二操作；

将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式；所述目标布局模板为所述第二操作选择的自定义布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的类别一一对应，且目标布局模板中各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。

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

接收用于配置自定义布局模板的操作，显示布局配置窗口；所述布局配置窗口用于配置自定义布局模板；

所述布局配置窗口包括可选元素样本区域以及配置区域；所述可选元素样本区域中包含多种类别的元素样本；所述配置区域为所述布局配置窗口中用于配置元素样本布局样式的区域。

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

接收作用于所述可选元素样本区域的元素样本的选择操作，在所述配置区域中添加被选择的元素样本；

接收作用于所述配置区域中的元素样本的移动操作，在所述配置区域内移动目标元素样本，所述目标元素样本为所述移动操作事件针对的元素样本；

接收保存自定义布局模板的操作，保存通过所述布局配置窗口配置的自定义布局模板。

4.根据权利要求3所述的方法，其特征在于，所述接收作用于所述可选元素样本区域的元素样本的选择操作，在所述配置区域中添加被选择的元素样本，包括：

接收作用于所述可选元素样本区域的元素样本的点击操作，在所述配置区域中添加被点击的元素样本。

5.根据权利要求3所述的方法，其特征在于，所述保存通过所述布局配置窗口配置的自定义布局模板，包括：

获取所述配置区域中元素样本的布局样式；

根据所述布局样式生成自定义布局模板；

将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中。

6.根据权利要求5所述的方法，其特征在于，所述获取配置区域中元素样本的布局样式，包括：

获取所述配置区域中元素样本的关联网格的第一分布信息；所述关联网格为所述配置区域中元素样本的最小外包矩形区域对应的网格；

获取所述配置区域中元素样本的第二分布信息，所述第二分布信息包括元素样本的数量、各元素样本的类别及其对应的网格信息；

根据所述第一分布信息以及所述第二分布信息，得到所述元素样本的布局样式。

7.根据权利要求6所述的方法，其特征在于，所述将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中，包括：

将所述自定义布局模板按照xml格式保存至所述当前登陆用户对应的布局模板库。

8.根据权利要求6所述的方法，其特征在于，所述布局配置窗口还包括模板列表区域；

在将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中之后还包括：

在所述模板列表区域中显示所述自定义布局模板的信息。

9.根据权利要求6所述的方法，其特征在于，在将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中之后还包括：

关闭所述布局配置窗口。

10.根据权利要求1所述的方法，其特征在于，所述获取待布局元素，包括：

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

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

11.根据权利要求10所述的方法，其特征在于，所述将所述待布局元素按照目标布局样式显示在页面中，包括：

将所述待布局元素按照所述目标布局样式显示在页面中的目标区域；

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

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

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

或者，所述局部区域为所述选定区域。

13.根据权利要求11所述的方法，其特征在于，所述将所述待布局元素按照目标布局样式显示在页面中的目标区域，包括：

将所述目标区域划分为多个子区；所述子区的分布与所述目标布局模板中元素样本的关联网格的分布一致；

所述关联网格为目标布局模板中所述元素样本的最小外包矩形区域对应的网格；

将所述待布局元素显示到所述多个子区，每个子区中显示的待布局元素的类别与所述目标布局模板中对应网格的元素样本的类别一致。

14.根据权利要求13所述的方法，其特征在于，所述多个子区的尺寸相同。

15.根据权利要求13所述的方法，其特征在于，还包括：在各子区中，将所述待布局元素以居中方式显示。

16.根据权利要求10至15任一所述的方法，其特征在于，所述将所述待布局元素按照目标布局样式显示在页面中之前，还包括：

获取所述待布局元素的数量和类别；

判断所述目标布局模板包含的元素样本的类别和数量是否与待布局元素中包含的类别和数量对应，若是，将所述待布局元素按照目标布局样式显示在页面中。

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

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

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

事件检测模块，用于接收用于选择自定义布局模板的第二操作；

布局处理模块，用于将所述待布局元素按照目标布局样式显示在页面中；所述目标布局样式为目标布局模板中元素样本的布局样式；所述目标布局模板为所述第二操作选择的自定义布局模板；所述目标布局模板中包含的元素样本的类别与待布局元素中包含的类别一一对应，且目标布局模板中各类别的元素样本的数量与待布局元素中对应类别的元素的数量相同。

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

窗口显示模块，用于接收用于配置自定义布局模板的操作，显示布局配置窗口；所述布局配置窗口用于自定义所述目标布局模板；

所述布局配置窗口包括可选元素样本区域以及配置区域；

所述可选元素样本区域中包含多种类别的元素样本；所述配置区域为所述布局配置窗口中用于配置元素样本布局样式的区域。

20.根据权利要求19所述的装置，其特征在于，所述装置还包括：

元素样本添加模块，用于接收作用于所述可选元素样本区域的元素样本的选择操作，在所述配置区域中添加被选择的元素样本；

元素样本移动模块，用于接收作用于所述配置区域中的元素样本的移动操作，在所述配置区域内移动目标元素样本，所述目标元素样本为所述移动操作事件针对的元素样本；

模板保存模块，用于接收保存自定义布局模板的操作，保存通过所述布局配置窗口配置的自定义布局模板。

21.根据权利要求20所述的装置，其特征在于，所述模板保存模块进一步包括：

样式获取模块，用于获取所述配置区域中元素样本的布局样式；

模板生成模块，用于根据所述布局样式生成自定义布局模板；

模板保存模块，用于将所述自定义布局模板保存至所述当前登陆用户对应的布局模板库中。

22.根据权利要求20所述的装置，其特征在于，所述样式获取模块，进一步包括：

第一分布获取单元，用于获取所述配置区域中元素样本的关联网格的第一分布信息；所述关联网格为所述配置区域中元素样本的最小外包矩形区域对应的网格；

第二分布获取单元，用于获取配置区域中元素样本的第二分布信息，所述第二分布信息包括元素样本的数量、各元素样本的类别及其对应的网格信息；

样式获取单元，用于根据所述第一分布信息以及所述第二分布信息，得到所述元素样本的布局样式。

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

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

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

24.根据权利要求18所述的装置，其特征在于，

所述布局处理模块，进一步用于将所述待布局元素按照目标布局样式显示在页面的目标区域；

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

25.根据权利要求24所述的装置，其特征在于，所述布局处理模块包括：

子区划分单元，用于将目标区域划分为多个子区；所述子区的分布与所述目标布局模板中元素样本的关联网格的分布一致；所述关联网格为目标布局模板中全部元素样本的最小外包矩形区域对应的网格；

布局单元，用于将所述待布局元素分别显示到所述多个子区，并且子区中显示的元素的类别与目标布局模板中对应网格的元素样本的类别一致。

26.根据权利要求25所述的装置，其特征在于，

所述布局单元，进一步用于在各子区中，将待布局元素以居中方式显示。

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

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

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