网页布局方法、装置、计算机设备以及存储介质与流程

本申请涉及应用开发，具体涉及一种网页布局方法、装置、计算机设备以及存储介质。

背景技术：

1、在网络应用的前端网页开发过程中，针对网页布局，采用flex布局或float布局对网页页面中的页面元素进行布局时，随着网页页面的显示高度或页面元素的元素高度的变化，容易产生浮动高度塌陷，导致网页页面的网页布局中存在大量空白区域，网页页面的控件利用率低。

技术实现思路

1、基于此，有必要针对上述技术问题，提供一种网页布局方法、装置、计算机设备以及存储介质，用以降低网页页面的网页布局中的空白区域，提高网页页面的控件利用率低。

2、第一方面，本申请提供一种网页布局方法，该方法包括：

3、获取网页页面中待布局页面元素、以及所述待布局页面元素的占用行数以及占用列数；

4、从所述待布局页面元素中确定第一页面元素，根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置；

5、若所述第一页面元素的占用行数不等于1，基于所述第一页面元素的可插入起始位置以及占用行数，在所述网格布局中的已布局页面元素中确定受所述第一页面元素影响的第二页面元素；

6、将所述第二页面元素作为新的待布局页面元素，再次执行从所述待布局页面元素中确定第一页面元素，根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置的步骤，直至遍历所述网页页面中的待布局页面元素；

7、根据各所述待布局页面元素的可插入起始位置，生成所述网页页面的页面布局。

8、在本申请一些实施例中，所述根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置的步骤，包括：

9、获取第一页面元素的目标占用列数；

10、按照所述网格布局中各个网格行的次序，依次查找各所述网格行中是否存在单元格数量大于或等于所述目标占用列的连续空白单元格；

11、若在目标网格行中查找到单元格数量大于或等于所述目标占用列的连续空白单元格，根据所述目标网格行中所述连续空白单元格的单元格位置信息，生成所述第一页面元素的可插入起始位置。

12、在本申请一些实施例中，所述根据所述目标网格行中所述连续空白单元格的单元格位置信息，生成所述第一页面元素的可插入起始位置的步骤，包括：

13、获取所述目标网格行中所述连续空白单元格的起始单元格；

14、将所述起始单元格的单元格位置信息确定为所述第一页面元素的可插入起始位置。

15、在本申请一些实施例中，所述按照所述网格布局中各个网格行的次序，依次查找各所述网格行中是否存在单元格数量大于或等于所述目标占用列的连续空白单元格的步骤之后，还包括：

16、若在所述网格布局中的各所述网格行均未查找到网格数量大于或等于所述目标占用列的连续空白单元格，在所述网格布局中新增网格行；

17、根据所述新增网格行中起始单元格的单元格位置信息，生成所述第一页面元素的可插入起始位置。

18、在本申请一些实施例中，所述从所述待布局页面元素中确定第一页面元素的步骤，包括：

19、获取所述待布局页面元素的顺序标识；

20、按照所述待布局页面元素对应顺序标识的大小顺序，从所述待布局页面元素中筛选第一页面元素。

21、在本申请一些实施例中，所述根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置的步骤之后，还包括：

22、若所述第一页面元素的占用行数等于1，再次执行从所述待布局页面元素中确定第一页面元素，根据所述第一页面元素的占用列数，根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置的步骤，直至遍历所述待布局页面元素。

23、在本申请一些实施例中，所述根据各所述待布局页面元素的可插入起始位置，生成所述网页页面的页面布局的步骤，包括：

24、根据所述待布局页面元素的可插入起始位置、占用行数以及占用列数，分别生成所述待布局页面元素的地图文件；

25、根据所述待布局页面元素的地图文件生成所述网页页面的页面布局。

26、第二方面，本申请提供一种网页布局装置，该装置包括：

27、页面元素获取模块，用于获取网页页面中待布局页面元素、以及所述待布局页面元素的占用行数以及占用列数；

28、插入位置确定模块，用于从所述待布局页面元素中确定第一页面元素，根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置；

29、页面元素确定模块，用于在所述第一页面元素的占用行数不等于1时，基于所述第一页面元素的可插入起始位置以及占用行数，在所述网格布局中的已布局页面元素中确定受所述第一页面元素影响的第二页面元素；

30、页面元素增加模块，用于将所述第二页面元素作为新的待布局页面元素，再次使插入位置确定模块执行从所述待布局页面元素中确定第一页面元素，根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置的步骤，直至遍历所述网页页面中的待布局页面元素；

31、网页布局生成模块，用于根据各所述待布局页面元素的可插入起始位置，生成所述网页页面的页面布局。

32、第三方面，本申请还提供一种计算机设备，该计算机设备包括：一个或多个处理器；存储器；以及一个或多个应用程序，其中所述一个或多个应用程序被存储于所述存储器中，并配置为由所述处理器执行以实现网页布局方法。

33、第四方面，本申请还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器进行加载，以执行网页布局方法中的步骤。

34、上述网页布局方法、装置、计算机设备以及存储介质，通过获取网页页面中待布局页面元素、以及所述待布局页面元素的占用行数以及占用列数；从待布局页面元素中确定第一页面元素，根据第一页面元素的占用列数，在网页页面的网格布局中查找可插入起始位置；若第一页面元素的占用行数不等于1，基于第一页面元素的可插入起始位置以及占用行数，在网格布局中的已布局页面元素中确定受第一页面元素影响的第二页面元素；将第二页面元素作为新的待布局页面元素，再次执行从待布局页面元素中确定第一页面元素，根据第一页面元素的占用列数，在网页页面的网格布局中查找可插入起始位置的步骤，直至遍历网页页面中的待布局页面元素；根据各待布局页面元素的可插入起始位置，生成网页页面。通过获取待布局页面元素的占用行数以及占用列数，针对待布局页面元素，按照一定的顺序、以查找出符合当前处理的页面元素进的占用列数的连续空白单元格作为其在网格布局中的插入位置为原则，快速查找各个页面元素的待插入起始位置，尽可能减少网页布局中的空白区域乃至消灭空白区域，提高网页页面的空间利用率。

技术特征：

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

2.根据权利要求1所述的方法，其特征在于，所述根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置的步骤，包括：

3.根据权利要求2所述的方法，其特征在于，所述根据所述目标网格行中所述连续空白单元格的单元格位置信息，生成所述第一页面元素的可插入起始位置的步骤，包括：

4.根据权利要求2所述的方法，其特征在于，所述按照所述网格布局中各个网格行的次序，依次查找各所述网格行中是否存在单元格数量大于或等于所述目标占用列的连续空白单元格的步骤之后，还包括：

5.根据权利要求1所述的方法，其特征在于，所述从所述待布局页面元素中确定第一页面元素的步骤，包括：

6.根据权利要求1所述的方法，其特征在于，所述根据所述第一页面元素的占用列数，在所述网页页面的网格布局中查找可插入起始位置的步骤之后，还包括：

7.根据权利要求1所述的方法，其特征在于，所述根据各所述待布局页面元素的可插入起始位置，生成所述网页页面的页面布局的步骤，包括：

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

9.一种计算机设备，其特征在于，所述计算机设备包括：

10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，所述计算机程序被处理器进行加载，以执行权利要求1至7任一项所述的网页布局方法中的步骤。

技术总结
本申请提供一种网页布局方法、装置、计算机设备以及存储介质。该方法包括获取网页页面中待布局页面元素、以及待布局页面元素的占用行数以及占用列数；根据待布局页面元素中第一页面元素的占用列数，在网页页面的网格布局中查找可插入起始位置；若第一页面元素的占用行数不等于1，基于第一页面元素的可插入起始位置以及占用行数，在网格布局中的确定受第一页面元素影响的第二页面元素；将第二页面元素作为新的待布局页面元素，最后所有待布局页面元素的可插入起始位置，生成网页页面。通过依次查找出符合当前处理的页面元素进的占用列数的连续空白单元格作为其在网页布局中的位置，在快速查找页面元素的位置的同时，减少网页布局中的空白区域。

技术研发人员：王逸钒
受保护的技术使用者：深圳TCL新技术有限公司
技术研发日：
技术公布日：2024/1/22