页面展示方法、系统和计算机设备与流程

1.本技术涉及互联网技术领域，特别是涉及一种页面展示方法、系统和计算机设备和存储介质。


背景技术：

2.随着网站页面布局技术的发展，为了使用户能在短时间内获得更多的信息量，不需要频繁点击翻页操作，在一个页面内展示更多的信息，因而出现了页面展示技术。
3.移动端开发中经常涉及到瀑布流布局，目前多以单一维度的形式呈现，信息以内容块为单位布局于终端界面，如图1所示。常见的瀑布流包括商品瀑布流列表、标签瀑布流列表等。
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.图1为一个实施例中页面展示方法的应用环境图；
51.图2为一个实施例中垂直布局方向时，页面展示方法的流程示意图；
52.图3为一个实施例中垂直布局方向时的页面元素排布示意图；
53.图4为一个实施例中现有技术和本技术使用场景的对比图；
54.图5为另一个实施例中垂直布局方向时，页面展示方法的流程示意图；
55.图6为一个实施例中水平布局方向时，页面展示方法的流程示意图；
56.图7为另一个实施例中布局方向为水平布局方向时的页面元素排布示意图；
57.图8为另一个实施例中水平布局方向时，页面展示方法的流程示意图；
58.图9为一个实施例中垂直布局方向和水平布局方向之间切换瞬间的页面元素排布示意图；
59.图10为一个实施例中水平布局方向时的页面元素排布示意图；
60.图11为一个实施例中页面展示装置的结构框图；
61.图12为一个实施例中计算机设备的内部结构图。
具体实施方式
62.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
63.本技术提供的页面展示方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。用户浏览终端102包括大量图文信息的网页时，用户可以通过触控或鼠标长按移动等形式触发页面滚动条滚动。终端102每个页面都包括大量页面元素，页面元素包括显示框和显示框展示的数据信息。终端102在检测到页面滚动条滚动时，则向服务器104申请获取待排布页面元素，待排布页面元素是即将排布的页面元素，待排布页面元素排布好后，用户可在终端102看到该确定位置的页面元素所展示的数据信息。服务器104响应终端102的申请向其发送待排布页面元素，如果页面布局各信息种类位置确定，终端102仅根据待排布页面元素的信息种类向服务器104请求获取对应的数据信息。在页面布局各信息种类位置任意时，终端102向服务器104请求待排布页面元素时，服务器104向终端102同时发送的待排布页面元素的显示框和数据信息，显示框的尺寸是任意的，显示框中的数据信息和显示框对应。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
64.在一个实施例中，如图2所示，提供了一种页面展示方法，以该方法应用于图1中的终端为例进行说明，包括以下步骤：
65.步骤202，获取待排布页面元素。
66.其中，终端在根据用户操作检测到网页的页面滚动条滚动时，会向服务器请求获取待排布页面元素。待排布页面元素是即将排布的一个页面元素，待排布页面元素排布好后，用户可在终端看到该确定位置的页面元素所展示的数据信息。
67.步骤204，在页面元素的布局方向为纵向时，获取页面布局的页面宽度。
68.其中，页面元素的布局方向包括纵向，即垂直布局，垂直布局方向对应页面滚动条上下滚动时页面元素的布局方向。页面宽度是指终端可显示的宽度，用于限定页面能展示页面元素的最大宽度。
69.其中，排布行是指页面中页面元素排布的行位置，排布列是指页面中页面元素排布的列位置。页面包括至少一个排布行和至少一个排布列。
70.s206，获取当前待排布行中已排布页面元素的宽度和待排布页面元素的宽度之
和，得到第一宽度和。
71.以图3为例，假设待排布元素为页面元素7，则第一宽度和为第三行中页面元素5和页面元素6，以及页面元素7的宽度之和。
72.当所述第一宽度和超过页面宽度时，执行步骤s208，确定下一行为待排布页面元素的目标排布行。
73.具体地，第一宽度和超过页面宽度，则表明在当前行已排布页面元素的基础上，基于页面宽度的限制，不能容纳待排布元素，进行换行处理，确定下一行为待排布页面元素的目标排布行。如图4所示，图4(a)是在具体使用场景中，现有技术中页面元素等宽时的页面布局形式，图4(b)是在具体使用场景中，本技术中页面元素不等宽的页面布局形式。由图4(a)可知，以当前页面排布两列为例，当前页面各页面元素是等宽的，当待排布页面元素较宽，与当前待排布行中已排布页面元素的宽度之和大于页面宽度时，在当前待排布行中存在剩余列未排布时，仍将该待排布页面元素放置于当前待排布行中，如“无量山樱花谷”页面元素所展示的实际上其右侧有一部分被切割，所展示的是满足页面宽度的一部分。由图4(b)可知，以当前待排布行排布两列为例，对于“城市地图”这一页面元素作为待排布页面元素进行排布时，由于其与已排布页面元素“昆明官渡古镇”的宽度之和大于页面宽度，将其排布于下一行，可使该待排布页面元素不会被切割。
74.上述页面展示方法中，在排布过程中，当当前待排布行中已排布元素的宽度和待排布页面元素的宽度之和，超过页面宽度时，对于此时的当前待排布行，无论是否存在某些列剩余空位，均不会将待排布页面元素排布在当前待排布行，而是对该待排布页面元素进行自动换行，将其放置于下一行，此时即可使原先可能由于过宽而被切割的页面元素，不会再被切割。本技术中只要满足当前待排布行的第一宽度和不会超过页面宽度即可，对于当前待排布行排布的各排布页面元素则灵活设置，允许各页面元素的高度和宽度不相同。因此，本技术在页面元素布局时，对页面布局中各页面元素的宽度和高度具有更多的包容性，可以实现各页面元素在排布时不受等宽的限制，不需要对较宽的元素进行切割，而是满足换行条件时自动换行，因此本技术能够保证信息内容在呈现时不容易失真。
75.在一个实施例中，如图5所示，在步骤s204，获取页面布局的页面宽度时，还包括获取页面布局的最大列数。
76.在步骤s207，获取当前待排布行中已排布页面元素的宽度和待排布页面元素的宽度之和，得到第一宽度和之前，还包括：步骤s206，判断当前待排布行中已排布的页面元素的列数是否小于最大列数；当当前待排布行中已排布页面元素的列数小于所述最大列数时，则执行步骤s206，获取当前待排布行中已排布页面元素的宽度和待排布页面元素的宽度之和，得到第一宽度和。
77.其中，当页面元素的布局方向为纵向时，由于页面元素展示是一种纵向的布局方式，因此，页面元素的最大宽度被限制，为了每一排布行能放一定数量的页面元素，终端通常预先设置好页面布局的最大列数。即，页面布局的最大列数用于限定能在一排布行中放置页面元素的最大数量。当当前待排布行中已排布页面元素的列数小于所述最大列数时，表明当前待排布行中存在还未放置页面元素的列，因此，在当前待排布行尚未布满的情况下，优先放置于当前待排布行中的剩余列上。此时，是否能放置于当前待排布行中的剩余列上，需要进一步校验当前待排布行中已排布页面元素的宽度和待排布页面元素的宽度之
和，才能最终确定，必须同时满足这两个条件，待排布页面元素才能放置于当前待排布行中的剩余列上。
78.本实施例中，通过判断当前待排布行中已排布页面元素的列数是否小于最大列数，当当前待排布行中已排布页面元素的列数小于最大列数时，则进一步通过获取第一宽度和，确定待排布页面元素是否能放置于当前待排布行中，进而使页面元素能尽可能地排布于当前待排布行，使排布更紧凑，另一方面又充分结合宽度之和进行考量能否放置于当前待排布行，在满足紧凑的前提下，尽可能保证页面元素不会被切割。
79.在一个实施例中，如图5所示，在步骤s204，获取页面布局的页面宽度时，还包括获取每列最大宽度；当当前待排布行中已排布页面元素的列数不小于所述最大列数时，执行步骤s208，确定下一行为待排布页面元素的目标排布行。
80.在一个实施例中，如图5所示，执行步骤s208，还包括：执行步骤s210，判断所述待排布页面元素的宽度是否大于每列最大宽度。
81.具体地，若待排布元素的页面宽度大于每列最大宽度，则说明一列列宽不能容纳待排布元素，会占据其它列的位置，而其它列位置上可能有其它的页面元素，则会造成排布范围重叠。如图3所示，假设待排布页面元素为7，由于页面元素为7的宽度大于最大页面宽度，若将其排布页面元素5的下方，则会与页面元素6的排布范围存在重叠。在待排布元素的页面宽度大于每列最大宽度，执行步骤s212。
82.若所述待排布页面元素的宽度大于所述每列最大宽度，则执行步骤s212，确定各列已排布页面元素的高度之和的最大值对应的列作为目标排布列。
83.其中，各列已排布页面元素的高度之和最大值，指的是以列为单位，每一列中当前已排布元素的高度之和的最大值。即已排布元素的高度之和最大的一列。如图3所示，若页面元素7未排布，各列已排布页面元素的高度之和的最大值对应的列为第二列。
84.在待排布元素的页面宽度大于每列最大宽度时，通过将各列已排布页面元素的高度之和的最大值对应的列作为目标排布列，能够使每个页面元素的排布范围独立，不会出现排布范围重叠的情况。如图3所示，将第二列作为页面元素5的目标排布列，页面元素5将排布在页面元素6的下方，使页面元素6不被遮挡。
85.s214，将待排布页面元素布局在目标排布行和目标排布列所对应的位置。
86.具体地，获得目标排布行和目标排布列后，基本确定待排布页面元素所在的位置。页面元素的显示框包括显示框尺寸和显示框坐标信息，显示框尺寸包括显示框的宽度和高度，显示框坐标信息可以基于显示框的四个顶点进行确定，也可基于显示框的中心点进行确定，方式不限。
87.在另一个实施例中，如图5所示，在步骤s210的判断结果为否，即，若待排布元素的页面宽度不大于每列最大宽度时，即表明，该待排布元素能够容纳在一列宽度的范围以内，则不会与其它页面元素存在排布范围重叠的风险，则执行步骤s211。
88.s211，确定各列已排布页面元素的高度之和的最小值对应的列作为目标排布列。
89.具体地，各列已排布页面元素的高度之和最小值，指的是以列为单位，每一列中当前已排布元素的高度之和的最小值，即已排布元素的高度之和最小的一列。如图3所示，若页面元素7未排布，各列已排布页面元素的高度之和的最小值对应的列为第一列。
90.在步骤s211之后，执行步骤s214。
91.本实施例中，在待排布元素能够容纳在一列宽度的范围以内，不会与其它页面元素存在排布范围重叠的风险时，将待排布元素排布在已排布页面元素的高度之和的最小值对应的列，使得排布紧凑，不浪费空间。
92.在另一个实施例中，如图5所示，在步骤s209的判断结果为否时，即第一宽度和不超过页面宽度时，表明在当前行已排布页面元素的基础上，基于页面宽度的限制，能够容纳待排布元素，则执行步骤s213，将当前排布行作为目标行，并执行s210及其之后的步骤。
93.本实施例中，通过当前行已排布元素的宽度和待排布元素的宽度和，与页面宽度进行比较，从页面宽度限制的维度考虑排布，使得排布合理，避免空间浪费。
94.应当注意的是，上述的步骤编号的大小并不是对步骤先后顺序的限制。
95.以图3为例，各页面元素按照排布顺序分别用阿拉伯数字表示，页面元素5即以第5个顺序排布在页面上，将页面元素5和页面元素6看作页面的已排布页面元素，页面元素7看作待排布页面元素。在考虑待排布页面元素7时，若为纵向布局，当前待排布行已排布页面元素包括页面元素5、6，最大列数为3例，先判断当前行已排布的页面元素的列数是否小于最大列数，如图3所示，当前行已排布的列数为两列，小于最大列数，则获取当前排布行中已排布页面元素的宽度和待排布页面元素的宽度之和，得到第一宽度和，即页面元素5、6和7之和，判断第一宽度和是否超过页面宽度，该案例中，第一宽度和超过了页面宽度，则将下一行作为目标排布行，即第四行。在确定了目标排布行之后，判断页面元素7的宽度是否大于每列最大宽度，该案例中，页面宽度大于每列最大宽度，则获取各列已排布元素的高度之和的最大值对应的列作为目标排布列，该案例中，高度和最大的列为第二列，则将第二列作为目标排布列。将页面元素7布局在第4行第2列所对应的位置，因此，页面元素7以页面元素6的位置为参照，距离页面元素6预设距离。在实际处理时，为了具有较好的视角效果，在纵向排布时，各页面元素采用左对齐的方式排布。
96.继续以图3为例，以已排布元素为1至4，待排布元素为5为例，当前行为第2行，当前行已排布的页面元素的列数不小于最大列数，则确定下一行为目标排布行，即第3行。判断待排布元素的页面宽度是否大于每列最大宽度，该案例中，页面元素5的页面宽度不大于每列最大宽度，则确定各列已排布元素的高度之和的最小值对应的列作为目标排布列，该案例中，已排布页面元素的高度之和的最小值对应的列为第一列，则将页面元素5排布在第三行第一列所对应的位置。
97.本技术的页面展示方法，还支持横向布局，如图6所示，包括：
98.s502，获取待排布页面元素。
99.其中，终端在根据用户操作检测到网页的页面滚动条滚动时，会向服务器请求获取待排布页面元素。待排布页面元素是即将排布的一个页面元素，待排布页面元素排布好后，用户可在终端看到该确定位置的页面元素所展示的数据信息。
100.s504，在页面元素的布局方向为横向时，获取页面布局的页面高度。
101.其中，页面元素的布局方向包括横向，即水平布局，水平布局方向对应页面滚动条左右滚动时页面元素的布局方向。当页面元素的布局方向为水平布局方向时，由于页面元素展示是一种横向的布局方式，因此，页面元素的最大高度被限制，为了每一排布行能放一定数量的页面元素，终端通常预先设置好页面布局的最大行数。
102.其中，排布行是指页面中页面元素排布的行位置，排布列是指页面中页面元素排
布的列位置。页面包括至少一个排布行和至少一个排布列。
103.s506，获取当前待排布列中已排布页面元素的高度和待排布页面元素的高度之和，得到第一高度和。
104.以图7为例，假设待排布元素为页面元素7，则第一宽度为第三行中页面元素5和页面元素6以及页面元素7的宽度之和。
105.当第一高度和超过页面高度时，执行步骤508，确定下一列为待排布页面元素的目标排布列。
106.具体地，第一高度和超过页面高度，则表明在当前列已排布页面元素的基础上，基于页面高度的限制，不能容纳待排布元素，进行换列处理，确定下一列为待排布页面元素的目标排布列。
107.上述页面展示方法中，上述页面展示方法中，在排布过程中，当当前待排布列中已排布元素的高度和待排布页面元素的高度之和，超过页面高度时，对于此时的当前待排布列，无论是否存在某些行剩余空位，均不会将待排布页面元素排布在当前待排布列，而是对该待排布页面元素进行自动换列，将其放置于下一列，此时即可使原先可能由于过高而被切割的页面元素，不会再被切割。本技术中只要满足当前待排布列的第一高度和不会超过页面高度即可，对于当前待排布列排布的各排布页面元素则灵活设置，允许各页面元素的宽度和高度不相同。因此，本技术在页面元素布局时，对页面布局中各页面元素的高度和高度具有更多的包容性，可以实现各页面元素在排布时不受等宽高的限制，不需要对较高的元素进行切割，而是满足换列条件时自动换列，因此本技术能够保证信息内容在呈现时不容易失真。
108.在一个实施例中，如图8所示，在获取页面布局的页面高度时，还包括：获取页面布局的最大行数；在步骤s507，获取当前待排布列中已排布页面元素的高度和待排布页面元素的高度之和，得到第一高度和之前，还包括：步骤s506，判断当当前待排布列中已排布页面元素的行数小于所述最大行数，当当前待排布列中已排布页面元素的行数小于所述最大行数，则执行步骤s507，获取当前待排布列中已排布页面元素的高度和待排布页面元素的高度之和，得到第一高度和。
109.其中，当页面元素的布局方向为横向时，由于页面元素展示是一种横向的布局方式，因此，页面元素的最大高度被限制，为了每一排布列能放一定数量的页面元素，终端通常预先设置好页面布局的最大行数。即，页面布局的最大行数用于限定能在一排布列中放置页面元素的最大数量。当当前待排布列中已排布页面元素的行数小于所述最大行数时，表明当前待排布列中存在还未放置页面元素的行，因此，在当前待排布列尚未布满的情况下，优先放置于当前待排布列中的剩余行上。此时，是否能放置于当前待排布列中的剩余行上，需要进一步校验当前待排布列中已排布页面元素的高度和待排布页面元素的高度之和，才能最终确定，必须同时满足这两个条件，待排布页面元素才能放置于当前待排布列中的剩余行上。
110.本实施例中，通过判断当前待排布列中已排布页面元素的行数是否小于最大行数，当当前待排布列中已排布页面元素的行数小于最大行数时，则进一步通过获取第一高度和，确定待排布页面元素是否能放置于当前待排布列中，进而使页面元素能尽可能地排布于当前待排布列，使排布更紧凑，另一方面又充分结合高度之和进行考量能否放置于当
前待排布列，在满足紧凑的前提下，尽可能保证页面元素不会被切割。
111.在一个实施例中，如图8所示，在步骤s504，获取页面布局的页面高度时，还包括获取每行最大高度；当当前待排布列中已排布页面元素的行数不小于所述最大行数时，执行步骤508，确定下一列为待排布元素的目标排布列。
112.在一个实施例中，如图8所示，执行步骤步骤s508之后，还包括：执行s510，判断待排布元素的页面高度是否大于所述每行最大高度。
113.具体地，若待排布元素的页面高度大于每行最大高度，则说明该一行行高不能容纳待排布元素，会占据其它行的位置，而其它行位置上可能有其它的页面元素，则会造成排布范围重叠。如图7所示，假设待排布页面元素为8，由于页面元素8的高度大于最大页面高度，若将其排布页面元素6的左方，则会与页面元素7的排布范围存在重叠。在待排布元素的页面高度大于每行最大高度时，执行步骤s512。
114.若待排布元素的页面高度大于所述每行最大高度，则执行步骤s512，确定各行已排布页面元素的宽度之和的最大值对应的行作为目标排布行。
115.其中，各行已排布页面元素的宽度之和最大值，指的是以行为单位，每一行中当前已排布元素的宽度之和的最大值。即已排布元素的宽度之和最大的一行。如图7所示，若页面元素8未排布，各行已排布页面元素的宽度之和的最大值对应的行为第二行。
116.在待排布元素的页面高度大于每列最大高度时，通过将各行已排布页面元素的宽度之和的最大值对应的行作为目标排布行，能够使每个页面元素的排布范围独立，不会出现排布范围重叠的情况。
117.s514，将待排布页面元素布局在目标排布行和目标排布列所对应的位置。
118.具体地，获得目标排布行和目标排布列后，基本确定待排布页面元素所在的位置。页面元素的显示框包括显示框尺寸和显示框坐标信息，显示框尺寸包括显示框的宽度和高度，显示框坐标信息可以基于显示框的四个顶点进行确定，也可基于显示框的中心点进行确定，方式不限。
119.在另一个实施例中，如图8所示，在步骤s510的判断结果为否，即若待排布元素的高度不大于每行最大高度时，即表明，该排布元素能够容纳在一行高度的范围以内，则不会与其它页面元素存在排布范围重叠的风险，则执行步骤s511。
120.s511，确定各行已排布页面元素的高度之和的最小值对应的行作为目标排布行。
121.具体地，各行已排布页面元素的高度之和最小值，指的是以行为单位，每一列中当前已排布元素的高度之和的最小值，即已排布元素的高度之和最小的一列。如图3所示，若页面元素7未排布，各列已排布页面元素的高度之和的最小值对应的列为第一列。
122.在步骤s511之后，执行步骤s514。
123.本实施例中，在待排布元素能够容纳在一行高度的范围以内，不会与其它页面元素存在排布范围重叠的风险时，将待排布元素排布在已排布页面元素的宽度之和的最小值对应的行，使得排布紧凑，不浪费空间。
124.在另一个实施例中，如图8所示，在步骤s509的判断结果为否时，即第一高度和不超过页面高度时，表明在当前列已排布页面元素的基础上，基于页面高度的限制，能够容纳待排布元素，则执行步骤s513，将当前排布列作为目标列，并执行s510及其之后的步骤。
125.本实施例中，通过当前列已排布元素的高度和待排布元素的高度和，与页面高度
进行比较，从页面高度限制的维度考虑排布，使得排布合理，避免空间浪费。
126.应当注意的是，上述的步骤编号的大小并不是对步骤先后顺序的限制。
127.以图7为例，进行横向排布，待排布页面元素为页面元素8，最大行数为4行，判断当前待排布列中已排布页面元素的行数小于最大行数，则获取当前待排布列中已排布页面元素的高度之和和待排布页面元素的高度之和，得到第一高度和，具体为页面元素6、页面元素7和页面元素8之和，第一高度和大于页面高度，则将下一列即第4列作为目标排布列。判断待排布元素的高度是否大于每行最大高度，该案例中，页面元素8的高度大于每行最大高度，则确定各行已排布元素的宽度之和的最大值对应的行作为目标排布行，即第2行作为目标排布行。将第4列第2行作为页面元素8的排布位置。
128.仍以图7为例，假设待排布元素为页面元素6，已排布元素为页面元素1至5，判断当前待排布列中已排布页面元素的行数不小于最大行数，确定下一列为目标排布列，即第3列作为目标排布列。判断待排布元素的高度小于每行最大高度，则确定已排布元素的高度之和的最小值对应的行作为目标排布行，即第一行作为目标排布行。将第3例第一待作为页面元素6的排布位置。
129.在一个实施例中，确定布局方向的方式，包括：响应布局方向切换指令，根据所述布局方向切换指令确定布局方向。
130.其中，用户触控页面滚动条使其滚动方向在上下滚动和左右滚动之间切换时，会生成布局方向切换指令，终端会响应布局方向切换指令确定布局方向，再根据确定的布局方向进行相应的页面布局，例如垂直布局方向和水平布局方向。垂直布局方向和水平布局方向瞬间切换时的页面布局如图9所示，切换前后当前页面的已排布页面元素只是位置发生变化，根据切换后的布局方向进行布局。以切换后的布局方向为水平布局方向为例，切换后，水平布局方向各页面元素的布局示意图如图10所示，页面元素8、9、10....用于表示继上一页面滑动后的页面元素布局。
131.在本实施例中，通过终端响应布局方向切换指令，根据布局方向切换指令切换布局方向，从而使页面展示更多元化，用户不仅可以上下滑动页面，还可以左右滑动页面，从而丰富了页面展示功能。
132.应该理解的是，虽然上述实施例涉及的各流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，上述实施例涉及的各流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
133.在一个实施例中，如图11所示，提供了一种页面展示系统，包括：页面元素获取模块701、参数获取模块702、和获取模块703和排布模块704，其中：
134.页面元素获取模块701，用于获取待排布页面元素；
135.参数获取模块702，用于在页面元素的布局方向为纵向时，获取页面布局的页面宽度；
136.和获取模块703，用于获取当前待排布行中已排布页面元素的宽度和待排布页面
元素的宽度之和，得到第一宽度和，所述已排布页面元素排布于所述当前待排布行中的各列；
137.排布模块704，用于当所述第一宽度和超过页面宽度时，确定下一行为待排布页面元素的目标排布行。
138.在一个实施例中，参数获取模块，还用于在页面元素的布局方向为横向时，获取页面布局的页面高度；
139.和获取模块，还用于获取当前待排布列中已排布页面元素的高度和待排布页面元素的高度之和，得到第一高度和；
140.排布模块，还用于当第一高度和超过页面高度时，确定下一列为待排布页面元素的目标排布列。
141.关于页面展示系统的具体限定可以参见上文中对于页面展示方法的限定，在此不再赘述。上述页面展示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
142.在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图12所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过wifi、运营商网络、nfc(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面展示方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
143.本领域技术人员可以理解，图12中示出的结构，仅仅是与本技术方案相关的部分结构的框图，并不构成对本技术方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
144.在一个实施例中，还提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
145.在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
146.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(read-only memory，rom)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(random access memory，ram)或外部高速缓冲存储器。作为说明而非局限，ram可以是多种形式，比如静态随机存取存储器(static random access memory，sram)或动态随机存取存
储器(dynamic random access memory，dram)等。
147.以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
148.以上所述实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术专利的保护范围应以所附权利要求为准。