一种页面布局方法、装置、电子设备及可读存储介质制造方法及图纸

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

【技术实现步骤摘要】
一种页面布局方法、装置、电子设备及可读存储介质
本专利技术涉及互联网
，特别是涉及一种页面布局方法、装置、电子设备及可读存储介质。
技术介绍
在互联网技术中，网站页面的布局方式直接影响用户使用网站的方便性。合理并具有特色的页面布局会让用户在浏览网站时快速发现核心内容和服务。页面布局是对页面的文字、图形或表格进行格式设置，包括字体、字号、颜色纸张大小和方向以及页边距等。页面布局的方法包括自适应布局，自适应布局的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。对于自适应布局，瀑布流是值得一提的，瀑布流是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局会不断加载数据块并附加至当前尾部。目前瀑布流多适用于图文列表展示，每一个模块宽度固定，高度根据内容自适应调整，每一个页面展示的列数根据屏幕宽度自适应调整，其页面布局可参见图1。可见，该方法适用范围单一、页面结构单一、无法突出重点及特色模块的展示。
技术实现思路
本专利技术实施例的目的在于提供一种页面布局方法、装置、电子设备及可读存储介质，以实现页面布局的多样性。具体技术方案如下：本专利技术实施例提供了一种页面布局方法，所述方法包括：在CSS(CascadingStyleSheets，层叠样式表)中搭建超文本标记语言层结构，为所述CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽；根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到所述页面容器层中列宽不同的各模块。可选的，在所述得到所述页面容器层中列宽不同的各模块之后，所述方法还包括：根据各模块相对于所述页面容器层的距离，设置所述各模块的位置属性，并将所述各模块固定在所述页面容器层。可选的，所述根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽，包括：通过调整每行最大列数，使获取的屏幕宽度与所述每行最大列数的比值大于或等于用户为所述子模块设置的初始列宽；将所述屏幕宽度与调整后的每行最大列数的比值作为子模块的列宽。可选的，所述根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，包括：若当前子模块所在的行数在用户设置的跨列数组内，将跨列数组中当前子模块所在的行数对应的数值与所述子模块的列宽的乘积，作为跨列模块的宽度。本专利技术实施例还提供了一种页面布局装置，所述装置包括：子模块加载模块，用于在层叠样式表CSS中搭建超文本标记语言层结构，为所述CSS的页面容器层加载子模块；列宽计算模块，用于根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽；各模块获得模块，用于根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到所述页面容器层中列宽不同的各模块。可选的，本专利技术实施例的页面布局装置，还包括：固定模块，用于根据各模块相对于所述页面容器层的距离，设置所述各模块的位置属性，并将所述各模块固定在所述页面容器层。可选的，所述列宽计算模块具体用于，通过调整每行最大列数，使获取的屏幕宽度与所述每行最大列数的比值大于或等于用户为所述子模块设置的初始列宽；将所述屏幕宽度与调整后的每行最大列数的比值作为子模块的列宽。可选的，所述各模块获得模块具体用于，若当前子模块所在的行数在用户设置的跨列数组内，将跨列数组中当前子模块所在的行数对应的数值与所述子模块的列宽的乘积，作为跨列模块的宽度。本专利技术实施例提供了一种电子设备，包括：处理器、通信接口、存储器和通信总线，其中，所述处理器、所述通信接口、所述存储器通过所述通信总线完成相互间的通信；所述存储器，用于存放计算机程序；所述处理器，用于执行所述存储器上所存放的程序时，实现上述任一所述的页面布局方法的步骤。本专利技术实施例提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时，实现上述任一所述的页面布局方法的步骤。本专利技术实施例提供的页面布局方法、装置、电子设备及可读存储介质，通过在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽；根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到页面容器层中列宽不同的各模块。本专利技术实施例的页面布局方法，突破了流式布局的单一性，在实现自适应的同时实现了多样性，可以满足各种各样的页面布局需求。当然，实施本专利技术的任一产品或方法并不一定需要同时达到以上所述的所有优点。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为相关技术中的页面布局的结构图；图2为本专利技术实施例的页面布局方法的流程图；图3为本专利技术实施例的页面布局的结构图；图4为本专利技术实施例的页面布局装置的结构图；图5为本专利技术实施例的电子设备的结构图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。为了解决现有的页面布局中，适用范围单一、页面结构单一、无法突出重点及特色模块的展示的问题，本专利技术实施例提供了一种页面布局方法、装置、电子设备及可读存储介质，以实现页面布局的多样性。下面首先对本专利技术实施例所提供的页面布局方法进行详细介绍。参见图2，图2为本专利技术实施例的页面布局方法的流程图，包括以下步骤：S201，在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块。具体的，CSS是一种用来表现HTML(HyperTextMarkupLanguage，超级文本标记语言)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。因此，可以通过ajax在CSS中搭建HTML层结构，为CSS的页面容器层加载子模块，其中，子模块即网页中的模块，Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。也就是，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。S202，根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽。本专利技术实施例中，由于不同显示设备的屏幕宽度通常是不同的，那么，页面在屏幕中显示的宽度也不同，因此，可以自适应获取屏幕的宽度，从而确定页面所能显示的宽度。另外，用户还可以为子模块设置初始列宽，即用户希望子模块显示的宽度，根据屏幕宽度和初始列宽，计算子模块的列宽，子模块的列宽即子模块实际的列宽。子模块的列宽的计算本文档来自技高网...

【技术保护点】
1.一种页面布局方法，其特征在于，所述方法包括：在层叠样式表CSS中搭建超文本标记语言层结构，为所述CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽；根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到所述页面容器层中列宽不同的各模块。

【技术特征摘要】
1.一种页面布局方法，其特征在于，所述方法包括：在层叠样式表CSS中搭建超文本标记语言层结构，为所述CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽；根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到所述页面容器层中列宽不同的各模块。2.根据权利要求1所述的页面布局方法，其特征在于，在所述得到所述页面容器层中列宽不同的各模块之后，所述方法还包括：根据各模块相对于所述页面容器层的距离，设置所述各模块的位置属性，并将所述各模块固定在所述页面容器层。3.根据权利要求1所述的页面布局方法，其特征在于，所述根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽，包括：通过调整每行最大列数，使获取的屏幕宽度与所述每行最大列数的比值大于或等于用户为所述子模块设置的初始列宽；将所述屏幕宽度与调整后的每行最大列数的比值作为子模块的列宽。4.根据权利要求1所述的页面布局方法，其特征在于，所述根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，包括：若当前子模块所在的行数在用户设置的跨列数组内，将跨列数组中当前子模块所在的行数对应的数值与所述子模块的列宽的乘积，作为跨列模块的宽度。5.一种页面布局装置，其特征在于，所述装置包括：子模块加载模块，用于在层叠样式表CSS中搭建超文本标记语言层结构，为所述CSS的页面容器层加载子模块；列宽计算模块，用于根据获取的屏...

【专利技术属性】
技术研发人员：沈文策，
申请(专利权)人：福建中金在线信息科技有限公司，
类型：发明
国别省市：福建,35