CN108196845A - 一种页面布局方法、装置、电子设备及可读存储介质 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可选的，本发明实施例的页面布局装置，还包括：

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

可选的，所述列宽计算模块具体用于，通过调整每行最大列数，使获取的屏幕宽度与所述每行最大列数的比值大于或等于用户为所述子模块设置的初始列宽；将所述屏幕宽度与调整后的每行最大列数的比值作为子模块的列宽。

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

本发明实施例提供了一种电子设备，包括：处理器、通信接口、存储器和通信总线，其中，所述处理器、所述通信接口、所述存储器通过所述通信总线完成相互间的通信；

所述存储器，用于存放计算机程序；

所述处理器，用于执行所述存储器上所存放的程序时，实现上述任一所述的页面布局方法的步骤。

本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时，实现上述任一所述的页面布局方法的步骤。

本发明实施例提供的页面布局方法、装置、电子设备及可读存储介质，通过在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽；根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到页面容器层中列宽不同的各模块。本发明实施例的页面布局方法，突破了流式布局的单一性，在实现自适应的同时实现了多样性，可以满足各种各样的页面布局需求。当然，实施本发明的任一产品或方法并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为相关技术中的页面布局的结构图；

图2为本发明实施例的页面布局方法的流程图；

图3为本发明实施例的页面布局的结构图；

图4为本发明实施例的页面布局装置的结构图；

图5为本发明实施例的电子设备的结构图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为了解决现有的页面布局中，适用范围单一、页面结构单一、无法突出重点及特色模块的展示的问题，本发明实施例提供了一种页面布局方法、装置、电子设备及可读存储介质，以实现页面布局的多样性。

下面首先对本发明实施例所提供的页面布局方法进行详细介绍。

参见图2，图2为本发明实施例的页面布局方法的流程图，包括以下步骤：

S201，在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块。

具体的，CSS是一种用来表现HTML(HyperText Markup Language，超级文本标记语言)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。因此，可以通过ajax在CSS中搭建HTML层结构，为CSS的页面容器层加载子模块，其中，子模块即网页中的模块，Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。也就是，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

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

本发明实施例中，由于不同显示设备的屏幕宽度通常是不同的，那么，页面在屏幕中显示的宽度也不同，因此，可以自适应获取屏幕的宽度，从而确定页面所能显示的宽度。另外，用户还可以为子模块设置初始列宽，即用户希望子模块显示的宽度，根据屏幕宽度和初始列宽，计算子模块的列宽，子模块的列宽即子模块实际的列宽。子模块的列宽的计算方法将在下文进行详细介绍，在此不再赘述。

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

本发明实施例中，跨列数组是一个多维数组，跨列数组中的元素指的是可以横跨几列。举例而言，如图3所示，跨列数组为[[3],[1,2]]，跨列数组包括两个子集，子集内元素表示当前列子元素跨列设置，例如，[3]表示第一行第一列宽度横跨3列，其余列数均为1列宽度；[1,2]表示第二行第一列宽度1列，第二行第二列宽度横跨2列，其余列数均为1列宽度，以此类推。可以看出，图3所述的页面布局与图1所示的页面布局相比，页面中模块的列宽可以是不同的，因此，页面结构更灵活，可以突出重点及特色模块的展示，从而满足各种各样的页面布局需求。

本发明实施例提供的页面布局方法，通过在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽；根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到页面容器层中列宽不同的各模块。本发明实施例的页面布局方法，突破了流式布局的单一性，在实现自适应的同时实现了多样性，可以满足各种各样的页面布局需求。

在本发明的一种实现方式中，在图2实施例S203之后，还包括：

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

具体的，在确定页面中的各模块之后，可以获取各模块相对于页面容器层的距离。例如，可以获取每个模块的左上角距离页面左侧的距离和左上角距离页面顶部的距离，将该两个距离作为每个模块相对于页面容器层的距离。当然，还可以获取每个模块的中心点距离页面左侧的距离和左上角距离页面顶部的距离，将该两个距离作为每个模块相对于页面容器层的距离。每个模块相对于页面容器层的距离的设置方法可以有很多种，在此不一一列举，当然，每个模块相对于页面容器层的距离的设置方法可以是统一的。在得到每个模块相对于页面容器层的距离之后，可以将每个模块相对于页面容器层的距离作为每个模块的位置属性，并将每个模块固定在页面容器层。

另外，在页面滚动时，还可以按照上述方法设置更多的模块。在设置好各模块之后，可以触发异步调取数据函数，向服务器发送HTTP请求，将获取的数据按相应的格式写入页面容器层，并显示所获取的数据。

本发明的一种实现方式中，根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽，包括：

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

本发明实施例中，可以通过调整每行最大列数，从而充分利用屏幕宽度，将每行的各模块铺满整个屏幕。当每行最大列数较大时，每个子模块的宽度将较小，并且可能小于用户为子模块设置的初始列宽。逐渐将每行最大列数的值变小，每个子模块的宽度将变大，在屏幕宽度与每行最大列数的比值大于或等于用户为子模块设置的初始列宽时，可以选取此时每行最大列数的值。

例如，若屏幕宽度为50cm，用户为子模块设置的初始列宽为7cm，那么最大列数的值为7时，屏幕宽度与每行最大列数的比值为50/7，该值大于7，因此，每行最大列数的值可以为7。当然，每行最大列数的值还可以是6、5等，可以根据实际应用进行设置。

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

在通过上述步骤得到调整后的每行最大列数之后，屏幕宽度与调整后的每行最大列数的比值即为子模块的列宽。需要说明的是，当每行最大列数的值大于1时，可以计算每行中的每个子模块在页面容器层中的位置。当每行最大列数的值等于1时，表明屏幕宽度已经足够小，子模块以100％的宽度(铺满整个屏幕)进行排版。

本发明的一种实现方式中，根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，包括：

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

具体的，如图2实施例S203所述，跨列数组是一个多维数组，跨列数组中的元素指的是可以横跨几列。例如，若跨列数组为[[3],[1,2]]，[3]表示第一行第一列宽度横跨3列，其余列数均为1列宽度；[1,2]表示第二行第一列宽度1列，第二行第二列宽度横跨2列，其余列数均为1列宽度。因此，在得到子模块的列宽之后，第一行第一列宽度即为3乘以子模块的列宽，第二行第一列宽度即为1乘以子模块的列宽，第二行第二列宽度即为2乘以子模块的列宽，可参见图3。当然，跨列数组可以是更高维的数组，可以根据实际情况进行设置。

相应于上述方法实施例，本发明实施例还提供了一种页面布局装置，参见图4，图4为本发明实施例的页面布局装置的结构图，包括：

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

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

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

本发明实施例提供的页面布局装置，通过在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽；根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到页面容器层中列宽不同的各模块。本发明实施例的页面布局方法，突破了流式布局的单一性，在实现自适应的同时实现了多样性，可以满足各种各样的页面布局需求。

需要说明的是，本发明实施例的装置是应用上述页面布局方法的装置，则上述页面布局方法的所有实施例均适用于该装置，且均能达到相同或相似的有益效果。

可选的，本发明实施例的页面布局装置，还包括：

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

可选的，本发明实施例的页面布局装置中，列宽计算模块具体用于，通过调整每行最大列数，使获取的屏幕宽度与每行最大列数的比值大于或等于用户为子模块设置的初始列宽；将屏幕宽度与调整后的每行最大列数的比值作为子模块的列宽。

可选的，本发明实施例的页面布局装置中，各模块获得模块具体用于，若当前子模块所在的行数在用户设置的跨列数组内，将跨列数组中当前子模块所在的行数对应的数值与子模块的列宽的乘积，作为跨列模块的宽度。

本发明实施例还提供了一种电子设备，参见图5，图5为本发明实施例的电子设备的结构图，包括：处理器501、通信接口502、存储器503和通信总线504，其中，处理器501、通信接口502、存储器503通过通信总线504完成相互间的通信；

存储器503，用于存放计算机程序；

处理器501，用于执行存储器503上所存放的程序时，实现上述实施例中任一页面布局方法的步骤。

需要说明的是，上述电子设备提到的通信总线504可以是PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。该通信总线504可以分为地址总线、数据总线、控制总线等。为便于表示，图5中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口502用于上述电子设备与其他设备之间的通信。

存储器503可以包括RAM(Random Access Memory，随机存取存储器)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述处理器501可以是通用处理器，包括：CPU(Central Processing Unit，中央处理器)、NP(Network Processor，网络处理器)等；还可以是DSP(Digital SignalProcessing，数字信号处理器)、ASIC(Application Specific Integrated Circuit，专用集成电路)、FPGA(Field-Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

本发明实施例的电子设备中，处理器通过执行存储器上所存放的程序，从而通过在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽；根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到页面容器层中列宽不同的各模块。本发明实施例的页面布局方法，突破了流式布局的单一性，在实现自适应的同时实现了多样性，可以满足各种各样的页面布局需求。

本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质内存储有计算机程序，计算机程序被处理器执行时，实现上述任一页面布局方法的步骤。

本发明实施例的计算机可读存储介质中存储的指令在计算机上运行时，从而通过在CSS中搭建超文本标记语言层结构，为CSS的页面容器层加载子模块；根据获取的屏幕宽度、用户为子模块设置的初始列宽，计算子模块的列宽；根据子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，得到页面容器层中列宽不同的各模块。本发明实施例的页面布局方法，突破了流式布局的单一性，在实现自适应的同时实现了多样性，可以满足各种各样的页面布局需求。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于页面布局装置、电子设备及可读存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (10)

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

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

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

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

2.根据权利要求1所述的页面布局方法，其特征在于，在所述得到所述页面容器层中列宽不同的各模块之后，所述方法还包括：

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

3.根据权利要求1所述的页面布局方法，其特征在于，所述根据获取的屏幕宽度、用户为所述子模块设置的初始列宽，计算子模块的列宽，包括：

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

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

4.根据权利要求1所述的页面布局方法，其特征在于，所述根据所述子模块的列宽以及用户设置的跨列数组，计算跨列模块的列宽，包括：

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

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

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

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

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

6.根据权利要求5所述的页面布局装置，其特征在于，所述装置还包括：

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

7.根据权利要求5所述的页面布局装置，其特征在于，所述列宽计算模块具体用于，通过调整每行最大列数，使获取的屏幕宽度与所述每行最大列数的比值大于或等于用户为所述子模块设置的初始列宽；将所述屏幕宽度与调整后的每行最大列数的比值作为子模块的列宽。

8.根据权利要求5所述的页面布局装置，其特征在于，所述各模块获得模块具体用于，若当前子模块所在的行数在用户设置的跨列数组内，将跨列数组中当前子模块所在的行数对应的数值与所述子模块的列宽的乘积，作为跨列模块的宽度。

9.一种电子设备，其特征在于，包括：处理器、通信接口、存储器和通信总线，其中，所述处理器、所述通信接口、所述存储器通过所述通信总线完成相互间的通信；

所述存储器，用于存放计算机程序；

所述处理器，用于执行所述存储器上所存放的程序时，实现权利要求1-4任一所述的页面布局方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现权利要求1-4任一所述的页面布局方法的步骤。