CN112287264A - 一种网页布局方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请提供一种网页布局方法、装置、电子设备及存储介质，该方法包括：获得网页中的多个布局对象；分别计算出多个布局对象的每个布局对象的最大边长值；按照最大边长值从大到小的顺序对多个布局对象进行排序，获得排序后的多个布局对象；依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，以实现网页布局。在上述的实现过程中，通过根据多个布局对象的每个布局对象的最大边长值对多个布局对象进行排序，有效地利用了递进式的排列信息，使用递进式的排列方式来避免容易存在空白位置的问题，提高了对网页进行布局的空间利用率，从而实现了高利用率的网页自动布局。

Description

一种网页布局方法、装置、电子设备及存储介质

技术领域

本申请涉及前端开发和网页布局的技术领域，具体而言，涉及一种网页布局方法、装置、电子设备及存储介质。

背景技术

超文本标记语言(Hyper Text Markup Language，HTML)，是一种标准通用标记语言，包括一系列标签。HTML通过标签将网络上的文档格式统一，使分散的因特网(Internet)资源连接为一个逻辑整体，HTML通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容(如：文字如何处理，画面如何安排，图片如何显示等)。

在当前的网络(web)应用开发过程中，需要针对网页中的布局对象进行合理的布局，才能够在保持网页美观的前提下，让有限网页内尽可能的展示更多的信息。因此，合理的网页布局在应用开发过程中显得尤为重要，然而在具体的实践过程中发现，使用目前的横向布局、纵向布局、流式布局、瀑布流布局等等自动布局方法，其中，横向布局是依赖于HTML中的行内元素标签实现的自动布局，此处的行内元素标签例如：img标签和span标签等；纵向布局是依赖于HTML中的块级元素标签实现的自动布局，此处的块级元素标签例如：div标签和li标签等，而流式布局和瀑布流布局是依赖于层叠样式表(英文全称：CascadingStyle Sheets，英文缩写CSS)的浮动样式实现的自动布局。

上述的这些自动布局方法大都依赖于浏览器提供的某些特定的层叠样式表(CSS)样式来实现自动布局，存在布局对象不够紧凑或者存在空白位置等等问题，也就是说，使用目前的自动布局方法对网页进行布局的空间利用率较低。

发明内容

本申请实施例的目的在于提供一种网页布局方法、装置、电子设备及存储介质，用于改善对网页进行布局的空间利用率较低的问题。

本申请实施例提供了一种网页布局方法，包括：获得网页中的多个布局对象；分别计算出多个布局对象的每个布局对象的最大边长值；按照最大边长值从大到小的顺序对多个布局对象进行排序，获得排序后的多个布局对象；依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，以实现网页布局。在上述的实现过程中，首先分别计算出多个布局对象的每个布局对象的最大边长值，然后按照最大边长值从大到小的顺序对多个布局对象进行排序，最后依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，获得合理布局的网页；也就是说，通过根据多个布局对象的每个布局对象的最大边长值对多个布局对象进行排序，有效地利用了递进式的排列信息，使用递进式的排列方式来避免容易存在空白位置的问题，提高了对网页进行布局的空间利用率，从而实现了高利用率的网页自动布局。

可选地，在本申请实施例中，依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，包括：判断排序后的多个布局对象中的当前布局对象与已布局的布局对象是否重叠；若是，则对当前布局对象进行重叠处理；若否，则对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。在上述的实现过程中，若排序后的多个布局对象中的当前布局对象与已布局的布局对象重叠，则对当前布局对象进行重叠处理；若排序后的多个布局对象中的当前布局对象与已布局的布局对象没有重叠，则对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理；从而避免了布局对象之间发生重叠的情况，有效地对布局对象进行重叠处理，提高了对网页进行布局的空间利用率。

可选地，在本申请实施例中，判断排序后的多个布局对象中的当前布局对象与已布局的布局对象是否重叠，包括：判断当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系是否满足预设关系；若是，则确定当前布局对象与已布局的布局对象不重叠；若否，则确定当前布局对象与已布局的布局对象重叠。在上述的实现过程中，通过当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系来判断是否重叠，以坐标为精度来确定是否重叠，从而能够做到网页布局时在布局对象之间的无缝衔接，有效地避免了本来可以放入页面的内容却无法放入等问题，提高了网页布局时的空间利用率。

可选地，在本申请实施例中，对当前布局对象进行重叠处理，包括：判断当前布局对象的第一边长值和已布局的布局对象的第一边长值之和是否超出网页的第一边长阈值；若是，则对当前布局对象进行换行移动。在上述的实现过程中，若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和超出网页的第一边长阈值，则对当前布局对象进行换行移动；从而避免了在第一边长方向上超过网页显示的情况，有效地保证了网页布局时展示更多的信息而不被遮挡，提供了网页布局时的空间利用率。

可选地，在本申请实施例中，对当前布局对象进行换行移动，包括：判断当前布局对象的第二边长值和已布局的布局对象的第二边长值之和是否超出网页的第二边长阈值；若否，则根据已布局的布局对象确定出布局位置，并将当前布局对象换行移动至布局位置，然后对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。在上述的实现过程中，若当前布局对象的第二边长值和已布局的布局对象的第二边长值之和没有超出网页的第二边长阈值，则根据已布局的布局对象确定出布局位置，并将当前布局对象换行移动至布局位置，然后对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理；从而避免了在第二边长方向上超过网页显示的情况，有效地保证了网页布局时展示更多的信息而不被遮挡，提供了网页布局时的空间利用率。

可选地，在本申请实施例中，根据已布局的布局对象确定出布局位置，包括：从上一行多个已布局的布局对象中筛选出满足预设条件的布局对象，预设条件为已布局的布局对象的第一边长值大于当前布局对象的第一边长值，且第二边长值是上一行多个已布局的布局对象中最小的；将在第二边长方向上紧邻第二边长值最小的布局对象的位置确定为布局位置。在上述的实现过程中，通过从上一行多个已布局的布局对象中筛选出满足预设条件的布局对象，并将在第二边长方向上紧邻第二边长值最小的布局对象的位置确定为布局位置；从而有效地将当前布局对象放入第一边长值小于布局对象的，且第二边长值在上一行中最小的布局对象下面，提高了确定合适布局位置的精确度。

可选地，在本申请实施例中，在判断当前布局对象的第二边长值和已布局的布局对象的第二边长值之和是否超出网页的第二边长阈值之后，还包括：若当前布局对象的第二边长值和已布局的布局对象的第二边长值之和超出网页的第二边长阈值，则输出没有合理布局位置的提示信息。

可选地，在本申请实施例中，在判断当前布局对象的第一边长值和已布局的布局对象的第一边长值之和是否超出网页的第一边长阈值之后，还包括：若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和没有超出网页的第一边长阈值，则对当前布局对象进行横向移动。在上述的实现过程中，通过若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和没有超出网页的第一边长阈值，则对当前布局对象进行横向移动；从而有效地利用了网页在第一边长方向上的可布局区域，有效地保证了网页布局时展示更多的信息而不被遮挡，提供了网页布局时的空间利用率。

本申请实施例还提供了一种网页布局装置，包括：布局对象获得模块，用于获得网页中的多个布局对象；最大边长计算模块，用于分别计算出多个布局对象的每个布局对象的最大边长值；布局对象排序模块，用于按照最大边长值从大到小的顺序对多个布局对象进行排序，获得排序后的多个布局对象；网页布局实现模块，用于依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，以实现网页布局。

可选地，在本申请实施例中，网页布局实现模块，包括：对象重叠判断模块，用于判断排序后的多个布局对象中的当前布局对象与已布局的布局对象是否重叠；当前对象处理模块，用于若排序后的多个布局对象中的当前布局对象与已布局的布局对象重叠，则对当前布局对象进行重叠处理；下个对象处理模块，用于若排序后的多个布局对象中的当前布局对象与已布局的布局对象没有重叠，则对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

可选地，在本申请实施例中，对象重叠判断模块，包括：顶点关系判断模块，用于判断当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系是否满足预设关系；对象重叠确定模块，用于若当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系满足预设关系，则确定当前布局对象与已布局的布局对象不重叠；对象重叠否定模块，用于若当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系不满足预设关系，则确定当前布局对象与已布局的布局对象重叠。

可选地，在本申请实施例中，当前对象处理模块，包括：第一边长判断模块，用于判断当前布局对象的第一边长值和已布局的布局对象的第一边长值之和是否超出网页的第一边长阈值；对象换行移动模块，用于若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和超出网页的第一边长阈值，则对当前布局对象进行换行移动；对象横向移动模块，用于若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和没有超出网页的第一边长阈值，则对当前布局对象进行横向移动。

可选地，在本申请实施例中，对象换行移动模块，包括：第二边长判断模块，用于判断当前布局对象的第二边长值和已布局的布局对象的第二边长值之和是否超出网页的第二边长阈值；布局对象移动模块，用于若当前布局对象的第二边长值和已布局的布局对象的第二边长值之和没有超出网页的第二边长阈值，则根据已布局的布局对象确定出布局位置，并将当前布局对象换行移动至布局位置，然后对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

可选地，在本申请实施例中，布局对象移动模块，包括：布局对象筛选模块，用于从上一行多个已布局的布局对象中筛选出满足预设条件的布局对象，预设条件为已布局的布局对象的第一边长值大于当前布局对象的第一边长值，且第二边长值是上一行多个已布局的布局对象中最小的；布局位置确定模块，用于将在第二边长方向上紧邻第二边长值最小的布局对象的位置确定为布局位置。

可选地，在本申请实施例中，对象换行移动模块，还包括：提示信息输出模块，用于若当前布局对象的第二边长值和已布局的布局对象的第二边长值之和超出网页的第二边长阈值，则输出没有合理布局位置的提示信息。

本申请实施例还提供了一种电子设备，包括：处理器和存储器，存储器存储有处理器可执行的机器可读指令，机器可读指令被处理器执行时执行如上面描述的方法。

本申请实施例还提供了一种存储介质，该存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如上面描述的方法。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对本申请实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出的本申请实施例提供的网页布局方法的流程示意图；

图2示出的本申请实施例提供的获取网页中的布局对象的示意图；

图3示出的本申请实施例提供的根据排序后的布局对象实现网页布局的结果示意图；

图4示出的本申请实施例提供的两个布局对象之间重叠的示意图；

图5示出的本申请实施例提供的利用画格子法判断重叠的示意图；

图6示出的本申请实施例提供的网页布局装置的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整的描述。

在介绍本申请实施例提供的网页布局方法之前，先介绍本申请实施例中所涉及的一些概念：

JavaScript是一种直译式脚本语言，也是一种动态类型、弱类型、基于原型的用户终端脚本语言，内置支持类型；该语言的解释器或解析器被称为JavaScript引擎，JavaScript是一种广泛用于用户终端中浏览器的脚本语言。

块格式化上下文(Block Formatting Context，BFC)，是Web页面的可视化CSS渲染出的一部分，BFC是块级盒布局出现的区域，也是浮动层元素进行交互的区域。BFC模块是一种WEB网页系统中的一类HTML标签集合，这些HTML标签的集合组成了一个类似长方形的模块，模块内部的结构不影响模块外部的环境，模块外部的环境也不会影响模块内部的结构。

文档对象模型(document object model，DOM)，是指描述一个XML文档解析结果的树型结构的内部数据模型；一个XML文档包括根节点、内部节点、叶子节点、备注节点等。

需要说明的是，本申请实施例提供的网页布局方法可以被电子设备执行，这里的电子设备是指具有执行计算机程序功能的设备终端或者服务器，设备终端例如：智能手机、个人电脑(personal computer，PC)、平板电脑、个人数字助理(personal digitalassistant，PDA)、移动上网设备(mobile Internet device，MID)、网络交换机或网络路由器等。

在介绍本申请实施例提供的网页布局方法之前，先介绍该网页布局方法适用的应用场景，这里的应用场景包括但不限于：使用该网页布局方法辅助前端工程师在网页开发过程中对页面中的布局对象进行布局工作，以及针对WEB开发工作中的BFC容器自动布局上等。当然，还可以将该网页布局方法应用在canvas画布标签中的节点自动布局的工作中，实现设备等节点的自适应排布，以更小的容器空间呈现更多的节点内容；或者，使用该网页布局方法增强(JavaScript)脚本语言或层叠样式表(CSS)在网页布局的功能，或者，使用该网页布局方法提升网页布局的美观度、易用性和空间利用率。

请参见图1示出的本申请实施例提供的网页布局方法的流程示意图；该网页布局方法的主要思路是，首先分别计算出多个布局对象的每个布局对象的最大边长值，然后按照最大边长值从大到小的顺序对多个布局对象进行排序，最后依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，获得合理布局的网页；也就是说，通过根据多个布局对象的每个布局对象的最大边长值对多个布局对象进行排序，有效地利用了递进式的排列信息，使用递进式的排列方式来避免容易存在空白位置的问题，从而提高了对网页进行布局的空间利用率；上述的网页布局方法可以包括：

步骤S100：获得网页中的多个布局对象。

布局对象是指针对网页中需要布局的目标对象，此处的布局对象可以是块格式化上下文(BFC)模块，该布局对象包括但不限于：HTML标签中的div容器标签和canvas画布标签；其中，div容器标签是一种WEB网页系统中的HTML标签，canvas是HTML5中用于定义图形的标签，也可以将div容器标签和canvas画布标签看做是一个BFC模块。

上述步骤S100的实施方式例如：使用JavaScript脚本语言在网页所在的浏览器中执行获取函数，从而获得网页中的多个布局对象，具体例如：执行JavaScript脚本文件并以文档对象模型(DOM)的形式获取多个布局对象；其中，具体可以通过唯一标识(ID)、节点名称(name)、标签名称(tag name)、类名称(class name)和选择器等等方式获取布局对象。

在步骤S100之后，执行步骤S200：分别计算出多个布局对象的每个布局对象的最大边长值。

最大边长值，是指布局对象的多个边长值中最大的边长值，例如：若布局对象为矩形，那么从矩形的第一边长值和第二边长值中筛选出最大的边长值，即矩形的长度值和高度值中较大的作为最长边长值。

请参见图2示出的本申请实施例提供的获取网页中的布局对象的示意图；其中，图中的每个布局对象与其它布局对象之间可以设置间隔距离，也可以不设置间隔距离，间隔距离具体可以设置为10，具体可以CSS语言中的margin来控制，为了便于展示位移关系和说明，由于本实施例的图像中显示了间隔距离，因此，计算时也应当考虑该间隔距离。上述步骤S200的实施方式例如：假设以图中示出的七个布局对象为例，这七个布局对象的分别使用数字代表每个布局对象的标识，那么假设七个布局对象分别为1(190，50)、2(100，140)、3(60，100)、4(40，200)、5(210，70)、6(180，30)和7(95，80)；其中，括号中的第一个数值代表该布局对象在第一方向(例如水平方向)的边长值，括号中的第二个数值代表该布局对象在第二方向(例如垂直方向)的边长值；可以理解的是，若布局对象是长方形的，那么第一个数值是该长方形的宽度值，第二个数值是该长方形的高度值。容易计算得出，七个布局对象的最大边长值分别为：1(190)、2(140)、3(100)、4(200)、5(210)、6(180)和7(95)；其中，括号外的数字代表每个布局对象的标识，括号内的数值代表每个布局对象的最大边长值。

在步骤S200之后，执行步骤S300：按照最大边长值从大到小的顺序对多个布局对象进行排序，获得排序后的多个布局对象。

上述步骤S300的实施方式例如：假设七个布局对象的最大边长值分别为：1(190)、2(140)、3(100)、4(200)、5(210)、6(180)和7(95)；那么按照最大边长值从大到小的顺序对七个布局对象进行排序，获得排序后的七个布局对象分别为：5(210)、4(200)、1(190)、6(180)、2(140)、3(100)和7(95)；其中，具体的排序算法可以采用冒泡排序算法和快速排序算法等等。

在步骤S300之后，执行步骤S400：依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，以实现网页布局。

请参见图3示出的本申请实施例提供的根据排序后的布局对象实现网页布局的结果示意图，其中，图中的每个布局对象与其它布局对象之间可以有10的间隔距离，具体可以CSS语言中的margin来控制；可以理解的是，此处依次放入排序后的多个布局对象是按照从左至右且从上至下的顺序放入网页进行布局的，在具体的实施过程中也可以不按照这样的顺序进行布局，而是按照其它顺序进行布局，此处的其它顺序例如：从右至左且从上至下，从右至左且从下至上，以及从左至右且从下至上等。上述步骤S400中的重叠判定的实施方式有很多种，包括但不限于：

第一种实施方式，根据当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系，来判断当前布局对象和已布局的布局对象是否重叠，该实施方式可以包括：

步骤S410：判断排序后的多个布局对象中的当前布局对象与已布局的布局对象是否重叠。

请参见图4示出的本申请实施例提供的两个布局对象之间重叠的示意图；以网页的左上角为原点，以水平方向为横坐标，以垂直方向为纵坐标，在网页中建立坐标系；假设当前布局对象的第一边长值(即宽度值)为w1，该当前布局对象的第二边长值(即高度值)为h1，且当前布局对象的左上角顶点的横坐标和纵坐标分别为x1和y1，那么容易计算出当前布局对象的四个顶点坐标分别为：左上角顶点(x1，y1)、右上角顶点(x1+w1，y1)、左下角顶点(x1，y1+h1)和右下角顶点(x1+w1，y1+h1)。同理可知，假设使用JavaScript脚本获取已布局的布局对象的宽度和高度分别为w和h，且已布局的布局对象的左上角顶点的横坐标和纵坐标分别为x和y，那么容易计算出当前布局对象的四个顶点坐标分别为：左上角顶点(x，y)、右上角顶点(x+w，y)、左下角顶点(x，y+h)和右下角顶点(x+w，y+h)。

根据两个布局对象顶点坐标之间的位置关系可以得知，如果两个布局对象重叠，那么一定有一个布局对象的某个顶点坐标在另一个布局对象的区域范围内，此时就可以确定这两个布局对象已经重叠了。由上可知，如果两个布局对象重叠，那么只可能是图4中的四种情况的一种或多种的组合；从图中的结论可以反推出，只要两个布局对象的顶点坐标满足以下四个公式中的任何一个，就可以确定这两个布局对象是没有重叠的；其中，这里的四个公式包括：第一个公式是(x1-(x+w))>0；第二个公式是(x-(x1+w1))>0；第三个公式是(y1-(y+h))>0；第四个公式是(y-(y1+h1))>0。

上述步骤S410的实施方式可以包括：判断当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系是否满足预设关系；其中，此处的预设关系为当前布局对象的顶点坐标与已布局的布局对象的顶点坐标使得上面四个公式中的任何一个公式成立。若当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系满足，则确定当前布局对象与已布局的布局对象不重叠。若当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系不满足，则确定当前布局对象与已布局的布局对象重叠。

在上述的实现过程中，通过当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系来判断是否重叠，即根据上面推导出来的四个公式来判断模块间是否重叠，且以坐标为精度来确定是否重叠，从而能够做到网页布局时在布局对象之间的无缝衔接，有效地提高了网页布局时的空间利用率。

第二种实施方式，请参见图5示出的本申请实施例提供的利用画格子法判断重叠的示意图；利用画格子方法来判断当前布局对象和已布局的布局对象是否重叠，该实施方式例如：在一块空白网页中预先设置一层虚拟的表格格子，然后统计所有表格格子中没有被占用的表格格子，然后将需要放入的布局对象和空白的表格格子进行对比，最终找到可以放入的位置，例如图5中依次找到上述七个布局对象放入的位置。

在步骤S410之后，执行步骤S420：若排序后的多个布局对象中的当前布局对象与已布局的布局对象不重叠，则对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

上述步骤S420的实施方式例如：若排序后的多个布局对象中的当前布局对象与已布局的布局对象不重叠，则对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

在步骤S410之后，执行步骤S430：若排序后的多个布局对象中的当前布局对象与已布局的布局对象重叠，则对当前布局对象进行重叠处理。

上述步骤S430中的对当前布局对象进行重叠处理的实施方式可以包括：

步骤S431：判断当前布局对象的第一边长值和已布局的布局对象的第一边长值之和是否超出网页的第一边长阈值。

步骤S432：若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和没有超出网页的第一边长阈值，则对当前布局对象进行横向移动。

上述步骤S431至步骤S432的实施方式例如：具体在图3中，假设网页的第一边长阈值(即网页的宽度值)为500，按照最大边长值从大到小的顺序排序后的七个布局对象分别为：5(210，70)、4(40，200)、1(190，50)、6(180，30)、2(100，140)、3(60，100)和7(95，80)。若当前布局对象为1，可以得知，当前布局对象的第一边长值为190，已布局的布局对象(5和4)的第一边长值为210+40＝250，则当前布局对象和已布局的布局对象的第一边长值之和为250+190＝440，此外，如果布局对象有间隔距离(margin)，还应当考虑布局对象之间的间隔距离值以及布局对象与布局区域边界的间隔距离值，为了便于计算，假设所有的布局对象的间隔距离均为10，那么目前共有三个布局对象，因此，间隔距离总和为40，则当前布局对象和已布局的布局对象的第一边长值之和加上间隔距离总和为440+40＝480；因此，当前布局对象的第一边长值和已布局的布局对象的第一边长值之和480没有超出网页的第一边长阈值500，则将当前(标识为1的)布局对象放在每个已布局的布局对象右侧的合理布局位置之后，再按照上面排序后的顺序进行判断是否重叠；如果将当前(标识为1的)布局对象放在当前已布局(标识为5)的布局对象右侧的合理布局位置之后，且判断出当前(标识为1的)布局对象与其它(标识为4)的布局对象重叠，则将当前(标识为1的)布局对象与下一个已布局(标识为4)的布局对象继续进行重叠判断，直到满足预设条件为止；相反地，如果将当前(标识为1的)布局对象放在当前已布局(标识为4)的布局对象右侧的合理布局位置之后，且当前(标识为1的)布局对象与当前已布局(标识为4)的布局对象不存在重叠，则将当前(标识为1的)布局对象放在当前已布局(标识为4)的布局对象右侧的合理布局位置；其中，该预设条件为当前布局对象找到合理布局位置，或者，当前布局对象与所有的已布局的布局对象全部判断完均找不到合理布局位置。

步骤S433：若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和超出网页的第一边长阈值，则对当前布局对象进行换行移动。

上述步骤S433的实施方式例如：同理可知，假设网页的第一边长阈值(即网页的宽度值)为500，按照最大边长值从大到小的顺序排序后的七个布局对象分别为：5(210，70)、4(40，200)、1(190，50)、6(180，30)、2(100，140)、3(60，100)和7(95，80)。若当前布局对象为2，那么当前布局对象的第一边长值为100，且已布局的布局对象的第一边长值为210+40+190＝440，两者之和为100+440＝540，因此，两者之和超出了网页的第一边长阈值500，则对当前布局对象进行换行移动，其中，第一边长阈值是指网页的水平方向边长值，具体例如：第一边长阈值可以是网页中的HTML标签节点的宽度值，或者是body标签节点的宽度值。

上述的对当前布局对象进行换行移动的具体过程可以包括：上面描述了在水平方向上判断是否超过网页的第一边长阈值，同理可知，在垂直方向上的判断也是类似的道理。假设网页的第二边长阈值为150，当前布局对象仍是2，可以判断当前布局对象的第二边长值为40，且已布局的布局对象的第二边长值为70，两者之和没有超出网页的第二边长阈值150，则根据已布局的布局对象确定出布局位置，此处的确定布局位置的具体方法将在下面描述，并将当前布局对象换行移动至布局位置，然后对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理；其中，第二边长阈值是指网页的垂直方向边长值，具体例如：第二边长阈值可以是网页中的HTML标签节点的高度值，或者是body标签节点的高度值。当然，在具体的实施过程中，若当前布局对象的第二边长值和已布局的布局对象的第二边长值之和超出网页的第二边长阈值，则可以输出没有合理布局位置的提示信息；也就是说，如果当前布局对象的高度值和已布局(垂直位置加高度值最小)的布局对象的高度值之和大于网页的高度值，那么该网页就无法放入当前布局对象。

上述的根据已布局的布局对象确定出布局位置的具体过程例如：从上一行多个已布局的布局对象中筛选出满足预设条件的布局对象，并将在第二边长方向上紧邻第二边长值最小的布局对象的位置确定为布局位置，即在垂直方向上紧邻在高度值最小的布局对象的位置就是需要放入的位置；其中，预设条件是已布局的布局对象的第一边长值大于当前布局对象的第一边长值，且第二边长值是上一行多个已布局的布局对象中最小的。举例来说，假设当前布局对象是6，按照最大边长值从大到小的顺序排序后的七个布局对象分别为：5(210，70)、4(40，200)、1(190，50)、6(180，30)、2(100，140)、3(60，100)和7(95，80)；那么上一行已经布局的布局对象的标识包括：5、4和1，需要从5、4和1中筛选出满足预设条件的布局对象，当前布局对象6的第一边长值(即宽度值)为180，而布局对象5、4和1的宽度值依次为210、40和190，因此，布局对象5和1都满足这个条件；但是还要满足第二边长值(即高度值)是布局对象5(70)、4(200)和1(50)中最小的，因此，只有布局对象1满足条件，那么布局对象1的下面就是当前布局对象6需要放入的位置。

在上述的实现过程中，首先分别计算出多个布局对象的每个布局对象的最大边长值，然后按照最大边长值从大到小的顺序对多个布局对象进行排序，最后依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，获得合理布局的网页；也就是说，通过根据多个布局对象的每个布局对象的最大边长值对多个布局对象进行排序，有效地利用了递进式的排列信息，使用递进式的排列方式来避免容易存在空白位置的问题，从而提高了对网页进行布局的空间利用率，从而实现了高利用率的网页自动布局；最终，可以达到布局对象之间无重叠和排列整齐，且极大地提高空间利用率的效果。

请参见图6示出的本申请实施例提供的网页布局装置的结构示意图。本申请实施例提供了一种网页布局装置200，包括：

布局对象获得模块210，用于获得网页中的多个布局对象。

最大边长计算模块220，用于分别计算出多个布局对象的每个布局对象的最大边长值。

布局对象排序模块230，用于按照最大边长值从大到小的顺序对多个布局对象进行排序，获得排序后的多个布局对象。

网页布局实现模块240，用于依次对排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，以实现网页布局。

可选地，在本申请实施例中，网页布局实现模块，包括：

对象重叠判断模块，用于判断排序后的多个布局对象中的当前布局对象与已布局的布局对象是否重叠。

当前对象处理模块，用于若排序后的多个布局对象中的当前布局对象与已布局的布局对象重叠，则对当前布局对象进行重叠处理。

下个对象处理模块，用于若排序后的多个布局对象中的当前布局对象与已布局的布局对象没有重叠，则对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

可选地，在本申请实施例中，对象重叠判断模块，包括：

顶点关系判断模块，用于判断当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系是否满足预设关系。

对象重叠确定模块，用于若当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系满足预设关系，则确定当前布局对象与已布局的布局对象不重叠。

对象重叠否定模块，用于若当前布局对象的顶点坐标与已布局的布局对象的顶点坐标之间的位置关系不满足预设关系，则确定当前布局对象与已布局的布局对象重叠。

可选地，在本申请实施例中，当前对象处理模块，包括：

第一边长判断模块，用于判断当前布局对象的第一边长值和已布局的布局对象的第一边长值之和是否超出网页的第一边长阈值。

对象换行移动模块，用于若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和超出网页的第一边长阈值，则对当前布局对象进行换行移动。

对象横向移动模块，用于若当前布局对象的第一边长值和已布局的布局对象的第一边长值之和没有超出网页的第一边长阈值，则对当前布局对象进行横向移动。

可选地，在本申请实施例中，对象换行移动模块，包括：

第二边长判断模块，用于判断当前布局对象的第二边长值和已布局的布局对象的第二边长值之和是否超出网页的第二边长阈值。

布局对象移动模块，用于若当前布局对象的第二边长值和已布局的布局对象的第二边长值之和没有超出网页的第二边长阈值，则根据已布局的布局对象确定出布局位置，并将当前布局对象换行移动至布局位置，然后对排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

可选地，在本申请实施例中，布局对象移动模块，包括：

布局对象筛选模块，用于从上一行多个已布局的布局对象中筛选出满足预设条件的布局对象，预设条件为已布局的布局对象的第一边长值大于当前布局对象的第一边长值，且第二边长值是上一行多个已布局的布局对象中最小的。

布局位置确定模块，用于将在第二边长方向上紧邻第二边长值最小的布局对象的位置确定为布局位置。

可选地，在本申请实施例中，对象换行移动模块，还包括：

提示信息输出模块，用于若当前布局对象的第二边长值和已布局的布局对象的第二边长值之和超出网页的第二边长阈值，则输出没有合理布局位置的提示信息。

应理解的是，该装置与上述的网页布局方法实施例对应，能够执行上述方法实施例涉及的各个步骤，该装置具体的功能可以参见上文中的描述，为避免重复，此处适当省略详细描述。该装置包括至少一个能以软件或固件(firmware)的形式存储于存储器中或固化在装置的操作系统(operating system，OS)中的软件功能模块。

本申请实施例提供的一种电子设备，包括：处理器和存储器，存储器存储有处理器可执行的机器可读指令，机器可读指令被处理器执行时执行如上的方法。

本申请实施例还提供了一种存储介质，该存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如上的方法。

其中，存储介质可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(Static Random Access Memory,简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory,简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read Only Memory,简称EPROM)，可编程只读存储器(Programmable Red-Only Memory,简称PROM)，只读存储器(Read-OnlyMemory,简称ROM)，磁存储器，快闪存储器，磁盘或光盘。

本申请实施例提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其他的方式实现。以上所描述的装置实施例仅是示意性的，例如，附图中的流程图和框图显示了根据本申请实施例的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以和附图中所标注的发生顺序不同。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这主要根据所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以使用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请实施例中的各个实施例的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

以上的描述，仅为本申请实施例的可选实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请实施例的保护范围之内。

Claims (10)

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

获得网页中的多个布局对象；

分别计算出所述多个布局对象的每个布局对象的最大边长值；

按照所述最大边长值从大到小的顺序对所述多个布局对象进行排序，获得排序后的多个布局对象；

依次对所述排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，以实现网页布局。

2.根据权利要求1所述的方法，其特征在于，所述依次对所述排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，包括：

判断所述排序后的多个布局对象中的当前布局对象与已布局的布局对象是否重叠；

若是，则对所述当前布局对象进行重叠处理；

若否，则对所述排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

3.根据权利要求2所述的方法，其特征在于，所述判断所述排序后的多个布局对象中的当前布局对象与已布局的布局对象是否重叠，包括：

判断所述当前布局对象的顶点坐标与所述已布局的布局对象的顶点坐标之间的位置关系是否满足预设关系；

若是，则确定所述当前布局对象与所述已布局的布局对象不重叠；

若否，则确定所述当前布局对象与所述已布局的布局对象重叠。

4.根据权利要求2所述的方法，其特征在于，所述对所述当前布局对象进行重叠处理，包括：

判断所述当前布局对象的第一边长值和所述已布局的布局对象的第一边长值之和是否超出所述网页的第一边长阈值；

若是，则对所述当前布局对象进行换行移动；

若否，则对所述当前布局对象进行横向移动。

5.根据权利要求4所述的方法，其特征在于，所述对所述当前布局对象进行换行移动，包括：

判断所述当前布局对象的第二边长值和所述已布局的布局对象的第二边长值之和是否超出所述网页的第二边长阈值；

若否，则根据所述已布局的布局对象确定出布局位置，并将所述当前布局对象换行移动至所述布局位置，然后对所述排序后的多个布局对象中的下一个布局对象进行重叠判定和重叠处理。

6.根据权利要求5所述的方法，其特征在于，所述根据所述已布局的布局对象确定出布局位置，包括：

从上一行多个所述已布局的布局对象中筛选出满足预设条件的布局对象，所述预设条件为所述已布局的布局对象的第一边长值大于所述当前布局对象的第一边长值，且第二边长值是所述上一行多个所述已布局的布局对象中最小的；

将在第二边长方向上紧邻所述第二边长值最小的布局对象的位置确定为所述布局位置。

7.根据权利要求5所述的方法，其特征在于，在所述判断所述当前布局对象的第二边长值和所述已布局的布局对象的第二边长值之和是否超出所述网页的第二边长阈值之后，还包括：

若所述当前布局对象的第二边长值和所述已布局的布局对象的第二边长值之和超出所述网页的第二边长阈值，则输出没有合理布局位置的提示信息。

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

布局对象获得模块，用于获得网页中的多个布局对象；

最大边长计算模块，用于分别计算出所述多个布局对象的每个布局对象的最大边长值；

布局对象排序模块，用于按照所述最大边长值从大到小的顺序对所述多个布局对象进行排序，获得排序后的多个布局对象；

网页布局实现模块，用于依次对所述排序后的多个布局对象的每个布局对象进行重叠判定和重叠处理，以实现网页布局。

9.一种电子设备，其特征在于，包括：处理器和存储器，所述存储器存储有所述处理器可执行的机器可读指令，所述机器可读指令被所述处理器执行时执行如权利要求1至7任一所述的方法。

10.一种存储介质，其特征在于，该存储介质上存储有计算机程序，该计算机程序被处理器运行时执行如权利要求1至7任一所述的方法。

Images