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

说明书

本发明实施例提供了一种页面布局方法、装置、电子设备及可读存储介质，应用于互联网技术领域，所述方法包括：在层叠样式表CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽；根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到页面容器层中列宽不同的各模块。本发明实施例突破了流式布局的单一性，在实现自适应的同时实现了多样性，可以满足各种各样的页面布局需求。

技术领域

本发明涉及互联网技术领域，特别是涉及一种页面布局方法、装置、电子设备及可读存储介质。

背景技术

在互联网技术中，网站页面的布局方式直接影响用户使用网站的方便性。合理并具有特色的页面布局会让用户在浏览网站时快速发现核心内容和服务。页面布局是对页面的文字、图形或表格进行格式设置，包括字体、字号、颜色纸张大小和方向以及页边距等。页面布局的方法包括自适应布局，自适应布局的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。

对于自适应布局，瀑布流是值得一提的，瀑布流是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局会不断加载数据块并附加至当前尾部。目前瀑布流多适用于图文列表展示，每一个模块宽度固定，高度根据内容自适应调整，每一个页面展示的列数根据屏幕宽度自适应调整，其页面布局可参见图1。可见，该方法适用范围单一、页面结构单一、无法突出重点及特色模块的展示。

发明内容

本发明实施例的目的在于提供一种页面布局方法、装置、电子设备及可读存储介质，以实现页面布局的多样性。具体技术方案如下：

本发明实施例提供了一种页面布局方法，所述方法包括：

在CSS(Cascading Style Sheets，层叠样式表)中搭建超文本标记语言层结构，为所述CSS的页面容器层加载子模块；

根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽；

根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到所述页面容器层中列宽不同的各模块。

可选的，在所述得到所述页面容器层中列宽不同的各模块之后，所述方法还包括：

根据各模块相对于所述页面容器层的距离，设置所述各模块的位置属性，并将所述各模块固定在所述页面容器层。

可选的，所述根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽，包括：

通过调整每行最大列数，使获取的屏幕宽度与所述每行最大列数的比值大于或等于用户为所述子模块设置的初始列宽；

将所述屏幕宽度与调整后的每行最大列数的比值作为子模块的列宽。

可选的，所述根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，包括：

若当前子模块所在的行数在用户设置的跨列数组内，将跨列数组中当前子模块所在的行数对应的数值与所述子模块的列宽的乘积，作为跨列模块的宽度。

本发明实施例还提供了一种页面布局装置，所述装置包括：

子模块加载模块，用于在层叠样式表CSS中搭建超文本标记语言层结构，为所述CSS的页面容器层加载子模块；

列宽计算模块，用于根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽；

各模块获得模块，用于根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到所述页面容器层中列宽不同的各模块。