[发明专利]一种网页布局方法、装置、电子设备及存储介质

说明书

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

技术领域

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

背景技术

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

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

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

发明内容

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

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

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