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

1.本公开涉及web前端技术领域，尤其涉及一种页面布局方法、装置、电子设备及存储介质。


背景技术：

2.随着web前端技术日新月异的发展，页面布局作为web前端技术中一项重要的技术也得到越来越多的关注，优秀的页面布局可以使系统的界面组织更加的合理，可视化程度高，以提升用户体验；目前的页面布局方法大多以元素或组件作为操作对象设置尺寸，操作繁琐，且适应性不强，不能满足用户的多元化需求。


技术实现要素：

3.为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种页面布局方法、装置、设备及存储介质。
4.第一方面，本公开提供了一种页面布局方法，该方法包括：
5.接收第一页面的布局指令；
6.根据布局指令，确定第一页面中的多个信息集合所对应的布局参数，每个信息集合包括至少一个元素；
7.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面。
8.可选的，布局参数包括以下至少一项：
9.多个信息集合的数量；
10.多个信息集合中每个信息集合的尺寸；
11.多个信息集合之间的间距；
12.第一标识的位置信息；
13.多个信息集合中每个信息集合与排列单元的百分比；
14.多个信息集合中每个信息集合的坐标信息；
15.其中，第一标识用于指示换行布局，或者，第一标识用于指示换列布局。
16.可选的，布局参数包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距中的至少一项；
17.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
18.根据布局参数，对第一页面中的多个信息集合进行目标排列方向的布局，以得到按照目标排列方向布局的第一页面；
19.其中，目标排列方向为行向或者列向。
20.可选的，布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距；
21.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
22.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局；
23.获取排列后多个信息集合所对应的第一显示单元的尺寸；
24.若第一显示单元的尺寸大于第一排列单元的尺寸，则在第一显示单元中的目标位置增加第一标识，排列单元为行或列；
25.对第一内容中的至少一个信息集合在第一排列单元中进行布局，以及对第二内容中的至少一个信息集合在第二排列单元中进行布局；第一内容处于目标位置之前，第二内容处于目标位置之后。
26.可选的，布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距；
27.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
28.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局；
29.获取排列后多个信息集合所对应的第一显示单元的尺寸；
30.若第一显示单元的尺寸大于第一排列单元的尺寸，则获取第一页面中的排列单元数，以及每个排列单元对应的尺寸；
31.根据第一页面中的排列单元数，每个排列单元对应的尺寸，以及第一显示单元的尺寸，在第一显示单元中确定至少一个位置；
32.在至少一个位置增加第一标识，以对第一显示单元进行分割，得到多个分割后的内容，对多个分割后的内容在不同排列单元中进行布局，每个分割后的内容中包括多个信息集合中的一个信息集合。
33.可选的，布局参数至少包括多个信息集合的数量、多个信息集合中每个信息集合的尺寸、多个信息集合之间的间距和第一标识的位置信息；
34.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
35.若布局参数中包括第一标识的位置信息，则在位置信息所指示的目标位置对第一显示单元切换排列单元。
36.可选的，多个信息集合中每个信息集合的尺寸相同。
37.第二方面，本公开提供了一种页面布局装置，该装置包括：
38.接收模块，用于接受第一页面的布局指令；
39.处理模块，用于确定第一页面中的多个信息集合所对应的布局参数，每个信息集合包括至少一个元素；
40.布局模块，用于基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面。
41.可选的，所述布局参数包括以下至少一项：
42.确定布局参数包括以下至少一项：
43.多个信息集合的数量；
44.多个信息集合中每个信息集合的尺寸；
45.多个信息集合之间的间距；
46.第一标识的位置信息；
47.多个信息集合中每个信息集合与排列单元的百分比；
48.多个信息集合中每个信息集合的坐标信息；
49.其中，第一标识用于指示换行布局，或者，第一标识用于指示换列布局。
50.可选的，布局参数包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距中的至少一项；
51.布局模块具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
52.根据布局参数，对第一页面中的多个信息集合进行目标排列方向的布局，以得到按照目标排列方向布局的第一页面；
53.其中，目标排列方向为行向或者列向。
54.可选的，布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距；
55.布局模块具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
56.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局；
57.获取排列后多个信息集合所对应的第一显示单元的尺寸；
58.若第一显示单元的尺寸大于第一排列单元的尺寸，则在第一显示单元中的目标位置增加第一标识，排列单元为行或列；
59.对第一内容中的至少一个信息集合在第一排列单元中进行布局，以及对第二内容中的至少一个信息集合在第二排列单元中进行布局；第一内容处于目标位置之前，第二内容处于目标位置之后。
60.可选的，布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距；
61.布局模块具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
62.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局；
63.获取排列后多个信息集合所对应的第一显示单元的尺寸；
64.若第一显示单元的尺寸大于第一排列单元的尺寸，则获取第一页面中的排列单元数，以及每个排列单元对应的尺寸；
65.根据第一页面中的排列单元数，每个排列单元对应的尺寸，以及第一显示单元的尺寸，在第一显示单元中确定至少一个位置；
66.在至少一个位置增加第一标识，以对第一显示单元进行分割，得到多个分割后的内容，对多个分割后的内容在不同排列单元中进行布局，每个分割后的内容中包括多个信
息集合中的一个信息集合。
67.可选的，布局参数至少包括多个信息集合的数量、多个信息集合中每个信息集合的尺寸、多个信息集合之间的间距和第一标识的位置信息；
68.布局模块具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
69.若布局参数中包括第一标识的位置信息，则在位置信息所指示的目标位置对第一显示单元切换排列单元。
70.可选的，多个信息集合中每个信息集合的尺寸相同。
71.第三方面，本公开提供了一种电子设备，该设备包括：处理器，存储器及存储在存储器上并可在处理器上运行的计算机程序，计算机程序被处理器执行时实现如第一方面的页面布局方法。
72.第四方面，本公开提供了一种计算机可读存储介质，该计算机可读存储介质上存储计算机程序，计算机程序被处理器执行时实现如第一方面的页面布局方法。
73.本公开实施例提供的技术方案与现有技术相比具有如下优点：本公开通过获取页面中信息集合所对应的布局参数，以对页面进行相应的布局，改变相应的布局参数即可得到用户所需的布局页面，使得页面布局灵活多变，从而可满足用户需求以适应多样的应用场景。
附图说明
74.此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
75.为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
76.图1为本公开实施例一种页面布局方法示意图一；
77.图2为本公开实施例一种页面布局方法的实施方式一的示意图；
78.图3为本公开实施例另一种页面布局方法示意图二；
79.图4为本公开实施例另一种页面布局方法的实施方式二的示意图；
80.图5为本公开实施例再一种页面布局方法示意图三；
81.图6为本公开实施例再一种页面布局方法的实施方式三的示意图；
82.图7为本公开实施例又一种页面布局方法的实施方式四的示意图；
83.图8为本公开实施例一种页面布局装置的结构图；
84.图9为本公开实施例一种电子设备的结构图。
具体实施方式
85.为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。
86.在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采
用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。
87.现有技术针对web页面中的元素直接设置尺寸进行布局，而布局页面需要的元素数量庞大，针对元素进行改动，需要对每个元素进行调整，工作量大；或者现有技术针对组件进行处理，配置组件存储于样式库，用户需要根据不同的布局方案，编写相应的针对组件的布局代码，操作繁琐，难度系数较大。
88.为了解决上述问题，本公开通过获取页面中信息集合所对应的布局参数，以满足用户需求对页面进行相应的布局，根据布局参数的不同可以得到灵活多变的页面布局，方便用户操作。
89.本公开实施例所描述的页面布局方法可应用于页面布局装置或者电子设备，其中，该页面布局装置可以为电子设备中可实现页面布局方法的功能模块和/或功能实体。
90.上述电子设备可以包括：智能手机(如android手机、ios手机、windows phone手机等)、平板电脑、掌上电脑、笔记本电脑、视频矩阵、监控平台、移动互联网设备(mid,mobile internet devices)或穿戴式设备、服务器，例如，云服务器等设备，上述仅是举例，而非穷举，包含但不限于上述设备。
91.图1为本公开实施例一种页面布局方法示意图一，如图1所示，该页面布局方法包括：
92.步骤s110、接收第一页面的布局指令。
93.本公开实施例中，第一页面是用户需要进行布局的页面，布局指令通过数据接口进行接收，在布局指令的触发下获取所述第一页面中的多个信息集合所对应的布局参数。
94.可选的，页面布局指令由用户自定义配置页面布局参数，或者页面布局指令由页面元数据文件触发，页面元数据文件中包含第一页面中的多个信息集合所对应的布局参数，但本公开实施例中的页面布局指令的来源不限于上述两种方式，在此不做限定。
95.步骤s120、根据所述布局指令，确定所述第一页面中的多个信息集合所对应的布局参数，每个信息集合包括至少一个元素。
96.本公开实施例中，信息集合包括至少一个元素，或者信息组合包括至少一个组件，其中组件由元素构成，例如，信息集合包括文字、图片、表格、按钮。如图2所示，2
‑
a表示页面的布局容器，其中，2
‑
b表示信息集合，2
‑
c表示组件，文字为元素，图示仅对页面、信息集合、组件以及元素的关系进行说明，对页面、信息集合、组件以及元素的类型、数量、形状不做限定。
97.需要说明的是，为更好地理解本技术的发明方案，对布局容器进行如下介绍：布局容器是搭建页面的基本结构，可以在一个无限的滚动区域定位组件，分为外层容器，顶栏容器、侧边容器、主要区域容器、底栏容器等，用于方便快速进行页面布局。
98.可选的，布局参数包括但不限于1)～6)中至少一项：
99.1)多个信息集合的数量；
100.2)多个信息集合中每个信息集合的尺寸；
101.若信息集合是规则形状，例如，矩形信息集合，则多个信息集合中每个信息集合的尺寸表示矩形信息集合的宽度和/或高度；再例如，圆形信息集合，则圆形信息集合的尺寸为半径或直径。本实施例对信息集合的形状并不做具体限制，其他不规则形状的信息集合
按照相应的方法确定其尺寸，在此不做赘述。
102.3)多个信息集合之间的间距；
103.可选的，以信息集合的外边框作为基准确定信息集合之间的间距，以一个信息集合的外边框到另一个信息集合的外边框的距离作为信息集合之间的间距，或者以信息集合的中心点作为基准确定信息集合之间的间距，以一个信息集合的中心点到另一个信息集合的中心点之间的距离作为信息集合之间的间距，但不仅限于上述方式确定多个信息集合之间的间距。
104.4)第一标识的位置信息；
105.第一标识用于指示换行布局，或者，第一标识用于指示换列布局；第一标识的位置信息，用于在指示的位置处添加第一标识。
106.5)多个信息集合中每个信息集合与排列单元的百分比；
107.多个信息集合中每个信息集合与排列单元的百分比是将页面划分为多个排列单元，例如，行或列，百分比为信息集合在行或列所占百分比，例如，以一行为一个排列单元，将信息集合的宽度设置为30％，那么信息集合在一行中占30％，一行中可排列三个信息集合，从而实现在页面变化的过程中，每个信息集合也将根据百分比规则进行变化。
108.6)多个信息集合中每个信息集合的坐标信息；
109.多个信息集合中每个信息集合的坐标信息包括每个信息集合的横坐标和纵坐标。
110.需要说明的是，上述页面布局参数可以但不限于配置在布局容器的json数据结构中，为更好地理解本技术的发明方案，对json进行如下介绍：
111.json(javascript object notation,js对象简谱)是一种轻量级的数据交换格式。它基于ecmascript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得json成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
112.上述步骤通过确定多个信息集合所对应的布局参数，以提供多种布局参数适用于不同的布局方案，满足用户的布局需求，实现对布局容器的复用。
113.步骤s130、基于所述多个信息集合所对应的布局参数，对所述第一页面中所述多个信息集合进行布局，以得到布局后的所述第一页面。
114.根据多个信息集合所对应的布局参数的类型不同以及将多个信息集合所对应的布局参数进行不同的组合，可以布局得到以下(1)～(4)种实施方式：
115.(1)实施方式一：
116.确定布局参数包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距中的至少一项；
117.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
118.根据布局参数，对第一页面中的多个信息集合进行目标排列方向的布局，以得到按照目标排列方向布局的第一页面；
119.其中，目标排列方向为行向或者列向。
120.(2)实施方式二
121.确定多个信息集合所对应的布局参数至少包括：多个信息集合的数量、多个信息
集合中每个信息集合的尺寸和多个信息集合之间的间距；
122.基于所述多个信息集合所对应的布局参数，对所述第一页面中所述多个信息集合进行布局，以得到布局后的所述第一页面，包括：
123.基于所述多个信息集合所对应的布局参数，对所述第一页面中所述多个信息集合进行按照目标排列方向进行布局；
124.获取排列后所述多个信息集合所对应的第一显示单元的尺寸；
125.若所述第一显示单元的尺寸大于第一排列单元的尺寸，则在所述第一显示单元中的目标位置增加所述第一标识，所述排列单元为行或列；
126.对第一内容中的至少一个信息集合在第一排列单元中进行布局，以及对第二内容中的至少一个信息集合在第二排列单元中进行布局；所述第一内容处于所述目标位置之前，所述第二内容处于所述目标位置之后。
127.(3)实施方式三：
128.确定布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距；
129.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
130.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局；
131.获取排列后多个信息集合所对应的第一显示单元的尺寸；
132.若第一显示单元的尺寸大于第一排列单元的尺寸，则获取第一页面中的排列单元数，以及每个排列单元对应的尺寸；
133.根据第一页面中的排列单元数，每个排列单元对应的尺寸，以及第一显示单元的尺寸，在第一显示单元中确定至少一个位置；
134.在至少一个位置增加第一标识，以对第一显示单元进行分割，得到多个分割后的内容，对多个分割后的内容在不同排列单元中进行布局，每个分割后的内容中包括多个信息集合中的一个信息集合。
135.(4)实施方式四：
136.确定布局参数至少包括多个信息集合的数量、多个信息集合中每个信息集合的尺寸、多个信息集合之间的间距和第一标识的位置信息；
137.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
138.若布局参数中包括第一标识的位置信息，则在位置信息所指示的目标位置对第一显示单元切换排列单元。
139.在一实施例中，确定布局参数包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距中的至少一项；
140.在确定布局参数之后，本实施例提供的一种可选实施方式中采用如下方式进行页面布局：
141.根据布局参数，对第一页面中的多个信息集合进行目标排列方向的布局，以得到按照目标排列方向布局的第一页面；
142.其中，目标排列方向为行向或者列向。
143.对应实施方式一，示例性的，如图2所示，确定的布局参数包括信息集合的数量为4个，每个信息集合的尺寸为宽100像素
×
高20像素，并在以外边框为基准的情况下确定信息集合之间的间距为5像素，则根据上述布局参数在页面中对4个信息集合进行列向布局，即按照从上到下的方式对信息集合进行布局。
144.根据上述确定的页面布局参数，对每个信息集合进行单行布局或者单列布局，实现页面多样布局中的一种布局方式，页面布局简洁、可视化程度高。
145.在一实施例中，如图3所示的本公开实施例页面布局方法示意图二，对应实施方式二。
146.步骤s310、接收第一页面的布局指令。
147.步骤s312、根据布局指令确定多个信息集合所对应的布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距。
148.步骤s313、基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局。
149.具体的，确定信息集合的数量、每个信息集合的尺寸以及信息集合之间的间距，根据上述参数对多个信息集合按照行或列的方向进行排列布局，然后执行步骤s316。
150.步骤s316、获取排列后多个信息集合所对应的第一显示单元的尺寸；
151.其中，第一显示单元是指多个信息集合按照目标排列方向进行布局后占据的布局单元。
152.获取将多个信息集合按行或列排列后的在页面所占据的布局单元的尺寸，用于与第一排列单元的尺寸进行比较，其中，第一排列单元是对第一页面按照目标排列方向进行划分的布局单元，例如，将第一页面的尺寸为100
×
100(宽
×
高)，将第一页面划分为4个行向排列单元，则每个行向排列单元的尺寸可表示100
×
25(宽
×
高)。
153.步骤s318、若第一显示单元的尺寸大于第一排列单元的尺寸，则在第一显示单元中的目标位置增加第一标识，排列单元为行或列。
154.具体实施时，将多个信息集合按行或列排列后的在页面所占据的布局单元的尺寸与第一页面的行或列的尺寸进行比较，得到多个信息集合按行或列排列后的在页面所占据的布局单元的尺寸大于第一页面的行或列的尺寸，则在超出第一页面的行或列的尺寸的位置增加第一标识，其中，第一标识用于将步骤s310排列的信息集合进行分割，分割后，第一标识位置之前的信息集合为第一内容，第一标识之后的信息集合为第二内容。
155.除此之外，若第一显示单元的尺寸小于或等于第一排列单元的尺寸，则在第一显示单元排列多个信息集合，无需增加第一标识。例如，多个信息集合排列所占的尺寸与页面第一行尺寸相同，则将多个信息集合排列在页面第一行。
156.步骤s320、对第一内容中的至少一个信息集合在第一排列单元中进行布局，以及对第二内容中的至少一个信息集合在第二排列单元中进行布局；第一内容处于目标位置之前，第二内容处于目标位置之后。
157.在增加第一标识后，分割得到的第一内容的尺寸小于或等于第一排列单元的尺寸，按照布局参数中的多个信息集合之间的间距对第一内容中包含的至少一个信息集合进行布局，并对第二内容在第二排列单元进行布局。
158.对应实施方式二，示例性地，如图4所示，确定的布局参数包括信息集合的数量为4个，每个信息集合的尺寸为宽25像素
×
高10像素，并在以外边框为基准的情况下确定信息集合之间的间距为10像素，根据上述布局参数在页面中对4个信息集合进行行向布局，即按照从左到右的方式对信息集合进行布局，在一行排列完成后自动增加换行标识；
159.其中，4
‑
a表示信息集合，4
‑
b表示排列单元，4
‑
c表示页面。
160.下述实施方式三对应的图6、实施方式四对应的图7中采用相同的图形示例性地表示信息集合、排列单元、页面，本公开对此不再重复说明；
161.通过确定多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距，使得在布局参数中不包括第一标识的情况下，页面布局需要换行或换列时，添加第一标识，以实现自动换行，适应页面尺寸，进行美观、可视化程度高的页面布局，提升用户体验，同时作为多种布局方案中的一种，体现布局容器对不同布局方案的适用性，有利于提升布局容器的复用性。
162.(3)实施方式三：
163.在一实施例中，如图5所示的本公开实施例页面布局方法示意图三，对应实施方式三。
164.步骤s510、接收第一页面的布局指令。
165.步骤s512、确定布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距。
166.步骤s514、基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局。
167.步骤s515、获取排列后多个信息集合所对应的第一显示单元的尺寸。
168.步骤s518、若第一显示单元的尺寸大于第一排列单元的尺寸，则获取第一页面中的排列单元数，以及每个排列单元对应的尺寸。
169.具体实施时，将多个信息集合按行布局或按列布局后的在页面所占据的布局单元的尺寸与第一页面的行或列的尺寸进行比较，得到多个信息集合按行或列排列后的在页面所占据的布局单元的尺寸大于第一页面的行或列的尺寸，则获取第一页面的所有行或列的数量，以及每行或每列的尺寸。例如，多个信息集合按行排列所占尺寸大于页面一行的宽度，则获取页面按照行划分后的行数，以及每行的尺寸。
170.步骤s520、根据第一页面中的排列单元数，每个排列单元对应的尺寸，以及第一显示单元的尺寸，在第一显示单元中确定至少一个位置。
171.多个信息集合按行或列排列后的在页面所占据的布局单元的尺寸大于第一页面的行或列的尺寸，例如，多个信息集合在页面第一行排列时超出页面第一行的宽度，需要对超出第一行的信息集合进行换行，可确定多个信息集合需要在第一行进行换行的位置，根据页面的行数、宽度，可确定多个在页面其他行进行换行的位置。确定位置后执行步骤s522。
172.步骤s522、在至少一个位置增加第一标识，以对第一显示单元进行分割，得到多个分割后的内容，对多个分割后的内容在不同排列单元中进行布局，每个分割后的内容中包括多个信息集合中的一个信息集合。
173.根据步骤s520确定的位置增加第一标识，在相应的位置进行换行或换列布局以对
步骤s514布局后获得的第一显示单元进行分割，分割得到的内容数量与页面的排列单元数量相同，然后将每个内容在相应的排列单元进行布局。
174.例如，信息集合在页面中的第一行排列时，超出页面第一行的尺寸，则获取页面所有的行的数量，以及每一行的宽度，以用于确定换行标识的位置，在信息集合排列超出行宽度的位置添加换行标识，以实现快速地对多个信息集合进行规则布局。
175.需要说明的是，第二内容进行布局时存在第一排列单元的下一排列单元的尺寸仍较小不足以容纳第二内容的情况，即仍需要在第二内容中添加第一标识，在第二内容中添加第一标识的原理与在第一显示单元中的目标位置增加第一标识的原理相同，在此不做赘述。
176.另外，第一标识不会对信息集合进行分割，添加第一标识后，超出行或列尺寸的信息集合将进行换行布局或换列布局。
177.对应实施方式三，示例性地，如图6所示，确定的布局参数包括信息集合的数量为12个，每个信息集合的尺寸为宽25像素
×
高10像素，并在以外边框为基准的情况下确定信息集合之间的间距为10像素，根据上述布局参数在页面中对12个信息集合进行行向布局，即按照从左到右的方式对信息集合进行布局，在一行排列完成后，得到页面共有四行，自动在每行排列完成后增加换行标识。
178.通过确定多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距，通过确定页面尺寸，实现自动增加换行标识，以满足用户规则布局的需求，并快速分割显示内容，提高页面的可视化程度，并且作为多种布局方案中的一种，体现布局容器对不同布局方案的适用性，有利于提升布局容器的复用性。
179.在一实施例中，首先接收第一页面的布局指令，然后根据布局指令确定布局参数至少包括多个信息集合的数量、多个信息集合中每个信息集合的尺寸、多个信息集合之间的间距和第一标识的位置信息；
180.可选的，基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
181.若布局参数中包括第一标识的位置信息，则在位置信息所指示的目标位置对第一显示单元切换排列单元。
182.具体实施时，根据布局参数中包括的第一标识的位置信息，在位置信息指示的目标位置处，对多个信息集合进行换行布局或换列布局，以按照用户的布局需求对页面进行灵活布局。
183.可选的，多个信息集合中每个信息集合的尺寸相同。
184.对应实施方式四，示例性地，如图7所示，确定的布局参数包括信息集合的数量为8个，每个信息集合的尺寸为宽25像素
×
高10像素，并在以外边框为基准的情况下确定信息集合之间的间距为10像素，根据上述布局参数在页面中对8个信息集合进行行向布局，即按照从左到右的方式对信息集合进行布局，根据用户需求，在第一个信息集合后、第三个信息集合后、第8个信息集合后增加换行标识，以得到满足用户需求的页面布局。
185.需要说明的是，根据布局参数的类型不同以及组合方式不同得到的页面不仅限于上述的页面，本公开实施例对此不作限定。
186.综上所述，本公开提供的一种页面布局方法，通过获取页面中信息集合所对应的
布局参数，以对页面进行相应的布局，改变布局容器中相应的布局参数即可得到用户所需的布局页面，实现布局容器的复用，从而可满足用户需求以适应多样的应用场景，同时，根据参数的不同类型，使得页面布局灵活多变。
187.实际应用中，页面的布局以及其他开发业务是一起设计方案来实现的，这样导致用户更改页面布局之后相应的开发业务也需要做适应性调整，而在本实施例中通过配置布局容器的json数据结构中的布局参数，将页面布局与其他开发业务解耦，交由布局容器进行统一处理，进而使得用户专注与业务的开发，提升了用户体验。
188.如图8所示，本公开实施例提供一种页面布局装置，该页面布局装置包括：
189.接收模块810，用于接受第一页面的布局指令；
190.处理模块820，用于确定第一页面中的多个信息集合所对应的布局参数，每个信息集合包括至少一个元素；
191.布局模块830，用于基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面。
192.在一些实施例中，布局参数包括以下至少一项：
193.多个信息集合的数量；
194.多个信息集合中每个信息集合的尺寸；
195.多个信息集合之间的间距；
196.第一标识的位置信息；
197.多个信息集合中每个信息集合与排列单元的百分比；
198.多个信息集合中每个信息集合的坐标信息；
199.其中，第一标识用于指示换行布局，或者，第一标识用于指示换列布局。
200.在一些实施例中，布局参数包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距中的至少一项；
201.布局模块830具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
202.根据布局参数，对第一页面中的多个信息集合进行目标排列方向的布局，以得到按照目标排列方向布局的第一页面；
203.其中，目标排列方向为行向或者列向。
204.在一些实施例中，布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距；
205.布局模块830具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
206.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局；
207.获取排列后多个信息集合所对应的第一显示单元的尺寸；
208.若第一显示单元的尺寸大于第一排列单元的尺寸，则在第一显示单元中的目标位置增加第一标识，排列单元为行或列；
209.对第一内容中的至少一个信息集合在第一排列单元中进行布局，以及对第二内容中的至少一个信息集合在第二排列单元中进行布局；第一内容处于目标位置之前，第二内
容处于目标位置之后。
210.在一些实施例中，布局参数至少包括：多个信息集合的数量、多个信息集合中每个信息集合的尺寸和多个信息集合之间的间距；
211.布局模块830具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
212.基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行按照目标排列方向进行布局；
213.获取排列后多个信息集合所对应的第一显示单元的尺寸；
214.若第一显示单元的尺寸大于第一排列单元的尺寸，则获取第一页面中的排列单元数，以及每个排列单元对应的尺寸；
215.根据第一页面中的排列单元数，每个排列单元对应的尺寸，以及第一显示单元的尺寸，在第一显示单元中确定至少一个位置；
216.在至少一个位置增加第一标识，以对第一显示单元进行分割，得到多个分割后的内容，对多个分割后的内容在不同排列单元中进行布局，每个分割后的内容中包括多个信息集合中的一个信息集合。
217.在一些实施例中，布局参数至少包括多个信息集合的数量、多个信息集合中每个信息集合的尺寸、多个信息集合之间的间距和第一标识的位置信息；
218.布局模块830具体用于：基于多个信息集合所对应的布局参数，对第一页面中多个信息集合进行布局，以得到布局后的第一页面，包括：
219.若布局参数中包括第一标识的位置信息，则在位置信息所指示的目标位置对第一显示单元切换排列单元。
220.可选的，多个信息集合中每个信息集合的尺寸相同。
221.通过本实施例公开的页面布局装置，通过获取页面中信息集合所对应的布局参数，以对页面进行相应的布局，改变布局容器中相应的布局参数，使得页面布局灵活多变，即可得到用户所需的布局页面，实现布局容器的复用，从而可满足用户需求以适应多样的应用场景，提升用户体验。
222.如图9所示，本公开实施例提供一种电子设备，该页面布局设备包括：处理器901，存储器902及存储在所述存储器902上并可在所述处理器901上运行的计算机程序，该计算机程序被处理器901可以实现上述方法实施例中可穿戴设备执行的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
223.本公开实施例提供一种计算机可读存储介质，其特征在于，该计算机可读存储介质上存储计算机程序，该计算机程序被处理器执行时实现上述方法实施例中电子设备执行的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
224.其中，该计算机可读存储介质可以为只读存储器(read
‑
only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等。
225.通过以上关于实施方式的描述，所属领域的技术人员可以清楚地了解到，本公开可借助软件及必需的通用硬件来实现，当然也可以通过硬件实现，但很多情况下前者是更佳的实施方式。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质
中，如计算机的软盘、只读存储器(read
‑
only memory,rom)、随机存取存储器(random access memory,ram)、闪存(flash)、硬盘或光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本公开各个实施例所述的方法。
226.值得注意的是，上述页面布局装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本公开的保护范围。
227.需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
228.以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所述的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。