基于流式布局的页面展示方法、电子设备及存储介质与流程

1.本发明涉及页面显示技术领域，具体涉及一种基于流式布局的页面展示方法、电子设备及存储介质。


背景技术：

2.随着科技及社会的不断发展，流式布局以其能够适配不同尺寸的显示设备等特点，而被广泛应用于互联网产品的页面显示中。
3.现有技术中基于流式布局的页面展示方法为：将展示元素从左至右、从上至下依次渲染，其中，若当前展示行不足以容纳待展示的展示元素，在新的展示行中渲染该展示元素。以图1为例，依次对展示元素1-9进行渲染，在第一个展示行渲染展示元素1及2之后，由于第一个展示行无法再容纳展示元素3，则在第二个展示行中渲染展示元素3及展示元素4，依次类推，直至完成展示元素9的渲染。
4.然而，发明人在实施过程中发现，现有技术中存在如下缺陷：如图1所示，该页面中的展示行右侧存在较多的空闲展示区域，由此现有技术中基于流式布局的页面展示方案会造成较多的页面资源的浪费，页面空间利用率低。


技术实现要素：

5.鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的基于流式布局的页面展示方法、电子设备及存储介质。
6.根据本发明的一个方面，提供了一种基于流式布局的页面展示方法，包括：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；从所述展示行中识别出当前的第一类展示行以及第二类展示行；其中，所述第一类展示行为非最后创建的展示行，所述第二类展示行为最后创建的展示行；判断第一类展示行中是否存在目标展示行；其中，所述目标展示行的有效剩余宽度大于或等于所述当前待展示的展示元素的宽度；
7.若是，从所述目标展示行中确定所述当前待展示的展示元素的展示位置；
8.若否，判断第二类展示行是否为目标展示行；若所述第二类展示行为目标展示行，则从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若所述第二类展示行不是目标展示行，则创建新的展示行，在所述新的展示行中确定所述当前待展示的展示元素的展示位置。
9.根据本发明的另一方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如下操作：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；从所述展示行中识别出当前的第一类展示行以及第二类展示行；其中，所述第一类展示行为非最后创建的展示行，所述第二类展示行为最后创建的展示行；
10.判断第一类展示行中是否存在目标展示行；其中，所述目标展示行的有效剩余宽
度大于或等于所述当前待展示的展示元素的宽度；
11.若是，从所述目标展示行中确定所述当前待展示的展示元素的展示位置；
12.若否，判断第二类展示行是否为目标展示行；若所述第二类展示行为目标展示行，则从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若所述第二类展示行不是目标展示行，则创建新的展示行，在所述新的展示行中确定所述当前待展示的展示元素的展示位置。
13.根据本发明的再一方面，提供了一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如上述基于流式布局的页面展示方法对应的操作。
14.本发明在布局当前待展示的展示元素时，先判断不是最后创建的第一类展示行中是否存在能够容纳当前待展示的展示元素的目标展示行，在第一类展示行中不存在目标展示行的情况下再判断最后创建的第二类展示行是否为目标展示行，从而能够减少页面资源的浪费，提升页面空间的利用率。
15.上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
16.通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
17.图1示出了现有技术提供的一种页面示意图；
18.图2示出了本发明实施例一提供的一种基于流式布局的页面展示方法的流程示意图；
19.图3示出了本发明实施例一提供的一种第一间距、第二间距、第三间距的示意图；
20.图4示出了本发明实施例一提供的一种页面示意图；
21.图5示出了本发明实施例二提供的一种基于流式布局的页面展示方法的流程示意图；
22.图6示出了本发明实施例二提供的一种第一间距、第三间距的示意图；
23.图7示出了本发明实施例二提供的一种页面示意图；
24.图8示出了本发明实施例二提供的又一种页面示意图；
25.图9示出了本发明实施例三提供的一种基于流式布局的页面展示方法的流程示意图；
26.图10示出了本发明实施例三提供的一种页面示意图；
27.图11示出了本发明实施例五提供的一种电子设备的结构示意图。
具体实施方式
28.下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例
所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。
29.实施例一
30.图2示出了本发明实施例一提供的一种基于流式布局的页面展示方法的流程示意图。其中，本发明实施例所提供的基于流式布局的页面展示方法的执行主体可以为具有显示功能的电子设备，如手机、电脑、平板、阅读器、智能可穿戴设备等等。具体地，如图2所示，该方法包括如下步骤：
31.步骤s210，获取当前待展示的展示元素的宽度。
32.展示元素具体为在页面中展示的元素，本发明实施例对展示元素的具体内容及具体格式不作限定。例如，展示元素可以为搜索结果词、历史搜索关键词、推荐词等等；而且，该展示元素可以为文本形式或图片形式等等。本发明实施例中，展示元素的高度可以保持一致，但展示元素的宽度参差不齐。
33.本发明实施例中，当前待展示的展示元素具体为待确定其展示位置的展示元素。作为一种可选的实施方式，可以将尚未确定出展示位置的展示元素放置于待展示元素集合中，并按照相应的次序依次从该集合中选取一个展示元素作为当前待展示的展示元素，例如，可以按照待展示元素集合中展示元素的展示次序指标值，依次从该集合中选取一个展示元素作为当前待展示的展示元素。在该当前待展示的展示元素确定出展示位置之后，将该展示元素从该待展示元素集合中剔除，并从该待展示元素集合中选取新的展示元素作为当前待展示的展示元素。
34.在确定当前待展示的展示元素的宽度之后，可以从该展示元素的属性数据中提取出该展示元素的尺寸信息，该尺寸信息包括展示元素的宽度信息，由此能够获取到展示元素的宽度。优选地，为适配不同屏幕尺寸，该宽度具体为百分比宽度，即该宽度表示展示元素绝对宽度与屏幕宽度的百分比。
35.步骤s220，确定已创建的各个展示行的有效剩余宽度。
36.本发明实施例是采用逐个创建的方式来创建展示行，即在确定出已创建的展示行无法完整渲染该当前待展示的展示元素时，才创建新的展示行。由此，已创建的展示行中已具有确定出展示位置的展示元素。
37.展示行的有效剩余宽度具体是指该展示行还能够容纳的展示元素的最大宽度。例如，第一个展示行的有效剩余宽度为40％，表示第一个展示行还能够容纳宽度小于或等于40％的展示元素。
38.在一种可选的实施方式中，已创建的各个展示行的有效剩余宽度具体通过如下方式确定：针对于任一已创建的展示行，确定该展示行中最后一个确定展示位置的目标展示元素，即该展示行中当前对应的最后一个确定出展示位置的展示元素即为该展示行的目标展示元素；进一步计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第二间距以及第三间距；则该展示行的有效剩余宽度为，第一间距-(第二间距 第三间距)。其中，第二间距为配置的相邻两个展示元素之间的间距，第三间距为配置的展示元素的第一边与页面的第一边的最小间距，该第一边为平行于页面高度方向的边，若按照从左至右的展示元素布局方式，则第一边为右边，若按照从右至左的展示元素布局方式，则第一边为左边。
39.以图3为例，当前待展示的展示元素为展示元素3，当前已创建的展示行为第一个展示行。该第一个展示行按照从左至右的布局方式布局有展示元素1以及展示元素2，其中，展示元素2为第一个展示行中最后一个确定展示位置的展示元素，则第一个展示行中的目标展示元素为展示元素2。展示元素2的右边与页面右边的间距为第一间距d1，配置的相邻两个展示元素(如图3中的展示元素1与展示元素2)之间的间距为第二间距d2，配置的展示元素的右边与页面的右边的最小间距为第三间距d3。则第一个展示行当前的有效剩余宽度d＝d1-(d2 d3)。该d表示第一个展示行中能够容纳的展示元素的最大宽度。
40.步骤s230，从展示行中识别出当前的第一类展示行以及第二类展示行；其中，第一类展示行为非最后创建的展示行，第二类展示行为最后创建的展示行。
41.本发明实施例将已创建的展示行划分为第一类展示行以及第二类展示行。该第二类展示行是最后创建的展示行，第一类展示行是除第二类展示行之外的其他展示行。
42.步骤s240，判断第一类展示行中是否存在目标展示行；其中，目标展示行的有效剩余宽度大于或等于当前待展示的展示元素的宽度；若是，则执行步骤s260，若否，则执行步骤s250。
43.现有技术中每次在布局待展示的展示元素时，仅判断最后创建的展示行是否能够容纳该待展示的展示元素。本发明实施例与现有技术不同的是，本发明实施例是预先从第一类展示行中识别能够容纳当前待展示的展示元素的目标展示行。在第一类展示行存在目标展示行的情况下，执行步骤s260；在第一类展示行不存在目标展示行的情况下，执行步骤s250。
44.在一种可选的实施方式中，可以采用如下方式判断第一类展示行中是否存在目标展示行：按照第一类展示行的创建时间的先后顺序，依次遍历第一类展示行；判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于当前待展示的展示元素的宽度；若是，则将当前遍历的第一类展示行作为目标展示行；若否，则遍历下一第一类展示行，并执行判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于当前待展示的展示元素的宽度的步骤。依次循环，直至确定出目标展示行后结束遍历，或者当前所有第一类展示行被遍历完后结束遍历。若在所有第一类展示行被遍历完后仍然无法确定出目标展示行，则表明当前已创建的第一类展示行中不存在目标展示行。采用该种方式，能够提升目标展示行的精确性，并且能够兼顾页面利用率以及展示元素原有的展示顺序。
45.步骤s250，判断第二类展示行是否为目标展示行；若是；则执行步骤s260；若否，则执行步骤s270。
46.在第一类展示行中不存在目标展示行的情况下，判断第二类展示行是否为目标展示行。具体是判断第二类展示行的有效剩余宽度是否大于或等于待展示的展示元素的宽度；若是，则确定第二类展示行为目标展示行，进一步执行步骤s260；若否，则执行步骤s270。
47.步骤s260，从目标展示行中确定当前待展示的展示元素的展示位置。
48.针对已创建的展示行中能够容纳待展示的展示元素的目标展示行，在该目标展示行的剩余空间内确定该待展示的展示元素的展示位置。
49.步骤s270，创建新的展示行，在新的展示行中确定当前待展示的展示元素的展示位置。
50.若已创建的展示行中不存在任何能够容纳待展示的展示元素的目标展示行，则在新的展示行中确定当前待展示的展示元素的展示位置。以下结合图1及图4来详细阐明本发明实施例与现有技术的区别：在确定展示元素1-9的展示位置的过程中，若当前待展示的展示元素为展示元素4，现有技术是在第二个展示行(即当前最后创建的展示行)中展示该展示元素4；而本技术则是在第一个展示行(即当前不是最后创建的展示行)中展示该展示元素4。采用现有技术而生成的图1中最终包含有6个展示行，而采用本发明实施例所提供的方法生成的图4仅包含5个展示行，从而提升页面空间的利用率。
51.由此可见，本发明实施例在布局当前待展示的展示元素时，先判断不是最后创建的第一类展示行中是否存在能够容纳当前待展示的展示元素的目标展示行，在第一类展示行中不存在目标展示行的情况下再判断最后创建的第二类展示行是否为目标展示行，从而能够减少页面资源的浪费，提升页面空间的利用率。
52.实施例二
53.图5示出了本发明实施例二提供的一种基于流式布局的页面展示方法的流程示意图。其中，本发明实施例所提供的页面展示方法是基于实施例一中方法的进一步改进。具体地，如图4所示，虽然采用实施例一中方法获得的图4相较于采用现有技术获得的图1能够减少页面空间资源的浪费，提升页面空间的利用率，但图4中仍然存在展示元素右端参差不齐的弊端，由此影响页面的展示效果，降低用户的浏览体验。鉴于此，在采用实施例一中方法确定出各个展示元素的展示位置之后，本发明实施例进一步地对实施例一中的展示位置进行修正，从而获得修正展示位置，以使得修正处理后的展示元素能够对齐。如图5所示，该方法包括如下步骤：
54.步骤s510，在确定出各个展示元素的展示位置之后，针对于任一展示行，确定该展示行中最后一个确定展示位置的目标展示元素。
55.在确定出各个展示元素的展示位置之后，便不再创建新的展示行，也不在创建的展示行中添加新的展示元素。由此，在确定出各个展示元素的展示位置之后，展示行的数目固定，展示行中最后一个确定展示位置的目标展示元素固定。
56.步骤s520，计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第三间距；其中，第三间距为展示元素的第一边与页面的第一边的最小间距。
57.第一间距及第三间距的相关描述可参照实施例一中记载，在此不作赘述。如图6所示，d3为预先配置的展示元素的右边与页面右边的最小间距；d
1-1
为第一个展示行最后一个展示元素的右边与页面的右边的第一间距，d
1-2
为第二个展示行的第一间距，d
1-3
为第三个展示行的第一间距，d
1-4
为第四个展示行的第一间距，d
1-5
为第五个展示行的第一间距。
58.步骤s530，计算第一间距与第三间距的差值。
59.仍以图6为例，第一个展示行对应的差值为d
1-1-d3，第二个展示行对应的差值为d
1-2-d3，第三个展示行对应的差值为d
1-3-d3，第四个展示行对应的差值为d
1-4-d3，第五个展示行对应的差值为d
1-5-d3。
60.步骤s540，根据该差值对该展示行中至少一个展示元素的宽度进行修正，并确定出修正处理后该展示行中各个展示元素的修正展示位置；其中，在修正处理后该展示行中第一间距与第三间距的修正后差值为预设差值。
61.根据步骤s530中获得的各个展示行对应的差值对展示行内包含的展示元素进行
宽度修正，使得修正处理后展示行对应的第一间距与第三间距的修正差值为预设差值，从而实现展示行中展示元素的对齐。如图7所示，经过修正处理后，展示行中展示元素能够右端对齐，从而提升页面展示效果。
62.在一种可选的实施方式中，针对于任一展示行，确定该展示行对应的差值以及包含的展示元素个数，继而将差值/展示元素个数作为该展示行各个展示元素需要增加的宽度。
63.在又一种可选的实施方式中，为了进一步地提升页面展示效果，在修正处理过程中，具体是判断每个展示行对应的差值是否小于预设阈值，若是，则确定该展示行为第三类展示行，并根据差值对该展示行中至少一个展示元素的宽度进行修正；否则，确定该展示行为第四类展示行，并不对该展示行中展示元素的宽度进行修正处理。以图6为例，由于第四个展示行对应的差值大于或等于预设差值，则确定该展示行为第四类展示行，并不对该展示行中的展示元素8进行宽度修正，以避免对展示元素8修正后与原有尺寸相差较大，影响用户的视觉体验。
64.进一步可选的，本发明实施例还包括：判断创建的展示行中是否存在第四类展示行；若是，调整创建的展示行的展示次序，以使第四类展示行的展示次序晚于第三类展示行的展示次序。结合图6及图8，图6中由于第四个展示行对应的差值大于或等于阈值差值，则该第四个展示行为第四类展示行，而其他展示行为第三类展示行，则不改变第四个展示行中展示元素8的宽度，而变更其他展示元素的宽度，并将第四个展示行的展示次序移至最后，从而生成如图8所示的示意图，由此进一步提升页面展示效果，提升用户的视觉体验。
65.由此可见，本发明实施例在确定出各个展示元素的展示位置之后，进一步地对展示位置进行修正，从而获得修正后的展示位置，以使得修正处理后页面平行高度的方向上展示元素能够对齐，提升页面展示效果，以及提升用户视觉体验。
66.实施例三
67.图9示出了本发明实施例三提供的一种基于流式布局的页面展示方法的流程示意图。其中，本发明实施例所提供的页面展示方法是对上述实施例一和/或实施例二提供的页面展示方法的进一步优化。如图9所示，该方法包括如下步骤：
68.步骤s910，获取各个展示元素的展示次序指标值；基于各个展示元素的展示次序指标值，对各个展示元素进行聚类处理，以生成至少一个类簇；每个类簇中包含至少一个展示元素。
69.展示次序指标值可采用相应的处理算法获得，本发明实施例对此不作限定。以展示元素为搜索结果为例，展示次序指标值为搜索结果与搜索词的匹配度；以展示元素为推荐词为例，展示次序指标值为推荐词与用户画像的匹配度。其中，匹配度越高，则展示次序指标值越低，表明该展示结果需优先展示。根据展示元素的展示次序指标值，对各个展示元素进行聚类处理。本发明实施例对具体的聚类算法不作限定，例如可以采用基于密度的聚类算法，还可以采用基于距离的聚类算法等等。在进行聚类处理之后，会生成至少一个类簇，每个类簇中包含至少一个展示元素。每个类簇中包含的展示元素的展示次序指标值高度接近。
70.步骤s920，确定当前待展示的类簇，从当前待展示的类簇中获取当前待展示的展示元素的宽度。
71.在一种可选的实施方式中，根据类簇对应的展示次序指标值的平均值的大小顺序，确定当前待展示的类簇。具体地，可以分别计算每个类簇包含的展示元素的展示次序指标值的平均值，继而按照类簇对应的平均值的由小到大的顺序依次排列。首次执行时，获取平均值最小的类簇作为当前待展示的类簇，待当前待展示的类簇中各个展示元素均确定出展示位置之后，则从尚未处理的类簇中选取对应的平均值最小的类簇作为当前待展示的类簇；在当前待展示的类簇中各个展示元素均未确定出展示位置之前，仍然将该类簇作为当前待展示的类簇。例如，按照类簇对应的平均值由小到大的顺序排列为：类簇c1＜类簇c2＜类簇c3，则先选取类簇c1作为当前待处理的类簇，待c1中全部展示元素均确定出展示位置之后，再将类簇c2作为当前待处理的类簇。在确定当前待展示的类簇之后，从当前待展示的类簇中获取当前待展示的展示元素的宽度。
72.步骤s930，确定当前待展示的类簇对应的已创建的各个展示行的有效剩余宽度。
73.本发明实施例中每个类簇均对应有相应的展示行，即每个类簇中展示元素的展示位置限定在该类簇对应的展示行中。在一种可选的实施方式中，可以将上一个待展示的类簇对应的最后创建的展示行，作为所述当前待展示的类簇对应的首个创建的展示行。则当前待展示的类簇对应的已创建的各个展示行是指以该对应的首个创建的展示行为起点至当前创建的展示行。
74.此外，针对于首个待展示的类簇，该类簇对应的已创建的展示行是指从处理起点至当前创建的展示行。举例来说，按照类簇对应的平均值由小到大的顺序排列为：类簇c1＜类簇c2＜类簇c3，则类簇c1对应的已创建的展示行是从开始处理c1的首个展示元素至当前这一时间段内生成的展示行；在处理完类簇c1中最后一个展示元素之后，当前生成的展示行为展示行5，则表明展示行5是类簇c1最后创建的展示行，则类簇c2对应的已创建的展示行是以展示行5的创建时间为起点至当前这一时间段内生成的展示行，即展示行5是类簇c2对应的首个创建的展示行。在处理完类簇c2中最后一个展示元素之后，当前生成的展示行为展示行8，则表明展示行8是类簇c2最后创建的展示行，则类簇c3对应的已创建的展示行是以展示行8的创建时间为起点至当前这一时间段内生成的展示行，即展示行8是类簇c3对应的首个创建的展示行。
75.步骤s940，从当前待展示的类簇对应的已创建的各个展示行中识别出当前待展示的类簇对应的第一类展示行以及第二类展示行。
76.其中，第一类展示行是当前待展示的类簇对应的已创建的各个展示行中非最后创建的展示行，第二类展示行是当前待展示的类簇对应的已创建的各个展示行中最后创建的展示行。
77.步骤s950，判断当前待展示的类簇对应的第一类展示行中是否存在目标展示行；若否，则执行步骤s960；若是，则执行步骤s970。
78.步骤s960，判断当前待展示的类簇对应的第二类展示行是否为目标展示行；若是，则执行步骤s970，若否，则执行步骤s980。
79.步骤s970，从目标展示行中确定当前待展示的展示元素的展示位置。
80.步骤s980，创建当前待展示的类簇对应的新的展示行，在新的展示行中确定当前待展示的展示元素的展示位置。
81.以图10为例，类簇c1包含展示元素1-9，类簇c2包含展示元素10-14，类簇c1对应的
展示行包括第一个至第五个展示行。类簇c2对应的展示行包括第五个至第七个展示行。在布局类簇c2中的展示元素10时，由于此时类簇c2对应的已创建的展示行为第五个展示行，即使第四个展示行能够容纳展示元素10，也不再将展示元素10布局在第四个展示行中。
82.由此可见，本发明实施例依据展示元素的展示次序指标值进行聚类处理，从而生成至少一个类簇，使得每个类簇包含的展示元素的展示次序指标值高度接近。并且每个类簇具有对应的展示行范围，从而仅允许该类簇的展示元素在该展示行范围内进行重排，由此避免展示次序指标值过高的展示元素被过早展示，由此兼顾页面空间的利用率以及展示元素原有的展示次序。
83.实施例四
84.本发明实施例四提供了一种非易失性计算机存储介质，所述计算机存储介质存储有至少一可执行指令，该计算机可执行指令可执行上述任意方法实施例中的方法。
85.可执行指令具体可以用于使得处理器执行以下操作：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；从所述展示行中识别出当前的第一类展示行以及第二类展示行；其中，所述第一类展示行为非最后创建的展示行，所述第二类展示行为最后创建的展示行；判断第一类展示行中是否存在目标展示行；其中，所述目标展示行的有效剩余宽度大于或等于所述当前待展示的展示元素的宽度；若是，从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若否，判断第二类展示行是否为目标展示行；若所述第二类展示行为目标展示行，则从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若所述第二类展示行不是目标展示行，则创建新的展示行，在所述新的展示行中确定所述当前待展示的展示元素的展示位置。
86.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：按照第一类展示行的创建时间的先后顺序，依次遍历第一类展示行；判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度；若是，则将当前遍历的第一类展示行作为目标展示行；若否，则遍历下一第一类展示行，并执行所述判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度的步骤。
87.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：针对于任一已创建的展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第二间距以及第三间距；其中，所述第二间距为相邻两个展示元素之间的间距，所述第三间距为展示元素的第一边与页面的第一边的最小间距；则该展示行的有效剩余宽度为，第一间距-(第二间距 第三间距)。
88.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：在确定出各个展示元素的展示位置之后，针对于任一展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第三间距；其中，所述第三间距为展示元素的第一边与页面的第一边的最小间距；计算所述第一间距与所述第三间距的差值；根据所述差值对该展示行中至少一个展示元素的宽度进行修正，并确定出修正处理后该展示行中各个展示元素的修正展示位置；其中，在修正处理后该展示行中第一间距与第三间距的修正后差值为预设差值。
89.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：判断所述差值是否小于预设阈值；若是，确定该展示行为第三类展示行，并根据所述差值对该展示行中至少一个展示元素的宽度进行修正；若否，确定该展示行为第四类展示行，并不对该展示行中展示元素的宽度进行修正。
90.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：判断创建的展示行中是否存在第四类展示行；若是，调整创建的展示行的展示次序，以使所述第四类展示行的展示次序晚于第三类展示行的展示次序。
91.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：在所述获取当前待展示的展示元素的宽度之前，获取各个展示元素的展示次序指标值；基于各个展示元素的展示次序指标值，对各个展示元素进行聚类处理，以生成至少一个类簇；其中，每个类簇中包含至少一个展示元素。
92.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：确定当前待展示的类簇，从所述当前待展示的类簇中获取当前待展示的展示元素的宽度；确定所述当前待展示的类簇对应的已创建的各个展示行的有效剩余宽度；从所述当前待展示的类簇对应的已创建的各个展示行中识别出所述当前待展示的类簇对应的第一类展示行以及第二类展示行；判断所述当前待展示的类簇对应的第一类展示行中是否存在目标展示行；判断所述当前待展示的类簇对应的第二类展示行是否为目标展示行。
93.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：将上一个待展示的类簇对应的最后创建的展示行，作为所述当前待展示的类簇对应的首个创建的展示行。
94.在一种可选的实施方式中，所述可执行指令使所述处理器执行如下操作：根据类簇对应的展示次序指标值的平均值的大小顺序，确定当前待展示的类簇。
95.由此可见，本发明实施例在布局当前待展示的展示元素时，先判断不是最后创建的第一类展示行中是否存在能够容纳当前待展示的展示元素的目标展示行，在第一类展示行中不存在目标展示行的情况下再判断最后创建的第二类展示行是否为目标展示行，从而能够减少页面资源的浪费，提升页面空间的利用率。
96.实施例五
97.图11示出了本发明实施例五提供的一种电子设备的结构示意图。本发明具体实施例并不对电子设备的具体实现做限定。如图11所示，该电子设备可以包括：处理器(processor)1102、通信接口(communications interface)1104、存储器(memory)1106、以及通信总线1108。
98.其中：处理器1102、通信接口1104、以及存储器1106通过通信总线1108完成相互间的通信。通信接口1104，用于与其它设备比如客户端或其它服务器等的网元通信。处理器1102，用于执行程序1110，具体可以执行上述方法实施例中的相关步骤。具体地，程序1110可以包括程序代码，该程序代码包括计算机操作指令。处理器1102可能是中央处理器cpu，或者是特定集成电路asic(application specific integrated circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个cpu；也可以是不同类型的处理器，如一个或多个cpu以及一个或多个asic。存储器1106，用于存放程序1110。存储器1106可能包含高速ram存储器，也
可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
99.程序1110具体可以用于使得处理器1102执行以下操作：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；从所述展示行中识别出当前的第一类展示行以及第二类展示行；其中，所述第一类展示行为非最后创建的展示行，所述第二类展示行为最后创建的展示行；判断第一类展示行中是否存在目标展示行；其中，所述目标展示行的有效剩余宽度大于或等于所述当前待展示的展示元素的宽度；若是，从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若否，判断第二类展示行是否为目标展示行；若所述第二类展示行为目标展示行，则从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若所述第二类展示行不是目标展示行，则创建新的展示行，在所述新的展示行中确定所述当前待展示的展示元素的展示位置。
100.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：按照第一类展示行的创建时间的先后顺序，依次遍历第一类展示行；判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度；若是，则将当前遍历的第一类展示行作为目标展示行；若否，则遍历下一第一类展示行，并执行所述判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度的步骤。
101.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：针对于任一已创建的展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第二间距以及第三间距；其中，所述第二间距为相邻两个展示元素之间的间距，所述第三间距为展示元素的第一边与页面的第一边的最小间距；则该展示行的有效剩余宽度为，第一间距-(第二间距 第三间距)。
102.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：在确定出各个展示元素的展示位置之后，针对于任一展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第三间距；其中，所述第三间距为展示元素的第一边与页面的第一边的最小间距；计算所述第一间距与所述第三间距的差值；根据所述差值对该展示行中至少一个展示元素的宽度进行修正，并确定出修正处理后该展示行中各个展示元素的修正展示位置；其中，在修正处理后该展示行中第一间距与第三间距的修正后差值为预设差值。
103.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：判断所述差值是否小于预设阈值；若是，确定该展示行为第三类展示行，并根据所述差值对该展示行中至少一个展示元素的宽度进行修正；若否，确定该展示行为第四类展示行，并不对该展示行中展示元素的宽度进行修正。
104.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：判断创建的展示行中是否存在第四类展示行；若是，调整创建的展示行的展示次序，以使所述第四类展示行的展示次序晚于第三类展示行的展示次序。
105.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：在所述获取当前待展示的展示元素的宽度之前，获取各个展示元素的展示次序指标值；基于各个展示元素的展示次序指标值，对各个展示元素进行聚类处理，以生成至少一个类
簇；其中，每个类簇中包含至少一个展示元素。
106.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：确定当前待展示的类簇，从所述当前待展示的类簇中获取当前待展示的展示元素的宽度；确定所述当前待展示的类簇对应的已创建的各个展示行的有效剩余宽度；从所述当前待展示的类簇对应的已创建的各个展示行中识别出所述当前待展示的类簇对应的第一类展示行以及第二类展示行；判断所述当前待展示的类簇对应的第一类展示行中是否存在目标展示行；判断所述当前待展示的类簇对应的第二类展示行中是否存在目标展示行。
107.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：将上一个待展示的类簇对应的最后创建的展示行，作为所述当前待展示的类簇对应的首个创建的展示行。
108.在一种可选的实施方式中，程序1110具体可以用于使得处理器1102执行以下操作：根据类簇对应的展示次序指标值的平均值的大小顺序，确定当前待展示的类簇。
109.由此可见，本发明实施例在布局当前待展示的展示元素时，先判断不是最后创建的第一类展示行中是否存在能够容纳当前待展示的展示元素的目标展示行，在第一类展示行中不存在目标展示行的情况下再判断最后创建的第二类展示行是否为目标展示行，从而能够减少页面资源的浪费，提升页面空间的利用率。
110.在此提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。
111.在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
112.类似地，应当理解，为了精简本发明并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。
113.本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
114.此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
115.本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(dsp)来实现根据本发明实施例的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
116.应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。上述实施例中的步骤，除有特殊说明外，不应理解为对执行顺序的限定。
117.本发明公开了：a1.一种基于流式布局的页面展示方法，包括：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；从所述展示行中识别出当前的第一类展示行以及第二类展示行；其中，所述第一类展示行为非最后创建的展示行，所述第二类展示行为最后创建的展示行；
118.判断第一类展示行中是否存在目标展示行；其中，所述目标展示行的有效剩余宽度大于或等于所述当前待展示的展示元素的宽度；
119.若是，从所述目标展示行中确定所述当前待展示的展示元素的展示位置；
120.若否，判断第二类展示行是否为目标展示行；若所述第二类展示行为目标展示行，则从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若所述第二类展示行不是目标展示行，则创建新的展示行，在所述新的展示行中确定所述当前待展示的展示元素的展示位置。
121.a2.根据a1所述的方法，其中，所述判断第一类展示行中是否存在目标展示行进一步包括：按照第一类展示行的创建时间的先后顺序，依次遍历第一类展示行；判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度；
122.若是，则将当前遍历的第一类展示行作为目标展示行；
123.若否，则遍历下一第一类展示行，并执行所述判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度的步骤。
124.a3.根据a1或a2所述的方法，其中，所述确定已创建的各个展示行的有效剩余宽度进一步包括：针对于任一已创建的展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第二
间距以及第三间距；其中，所述第二间距为相邻两个展示元素之间的间距，所述第三间距为展示元素的第一边与页面的第一边的最小间距；则该展示行的有效剩余宽度为，第一间距-(第二间距 第三间距)。
125.a4.根据a1-a3中任一项所述的方法，其中，在确定出各个展示元素的展示位置之后，所述方法还包括：针对于任一展示行，确定该展示行中最后一个确定展示位置的目标展示元素；计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第三间距；其中，所述第三间距为展示元素的第一边与页面的第一边的最小间距；计算所述第一间距与所述第三间距的差值；根据所述差值对该展示行中至少一个展示元素的宽度进行修正，并确定出修正处理后该展示行中各个展示元素的修正展示位置；其中，在修正处理后该展示行中第一间距与第三间距的修正后差值为预设差值。
126.a5.根据a4所述的方法，其中，所述根据所述差值对该展示行中至少一个展示元素的宽度进行修正进一步包括：判断所述差值是否小于预设阈值；
127.若是，确定该展示行为第三类展示行，并根据所述差值对该展示行中至少一个展示元素的宽度进行修正；
128.若否，确定该展示行为第四类展示行，并不对该展示行中展示元素的宽度进行修正。
129.a6.根据a5所述的方法，其中，所述方法还包括：判断创建的展示行中是否存在第四类展示行；
130.若是，调整创建的展示行的展示次序，以使所述第四类展示行的展示次序晚于第三类展示行的展示次序。
131.a7.根据a1-a6中任一项所述的方法，其中，在所述获取当前待展示的展示元素的宽度之前，所述方法还包括：获取各个展示元素的展示次序指标值；基于各个展示元素的展示次序指标值，对各个展示元素进行聚类处理，以生成至少一个类簇；其中，每个类簇中包含至少一个展示元素。
132.a8.根据a7所述的方法，其中，所述获取当前待展示的展示元素的宽度进一步包括：确定当前待展示的类簇，从所述当前待展示的类簇中获取当前待展示的展示元素的宽度；
133.所述确定已创建的各个展示行的有效剩余宽度进一步包括：确定所述当前待展示的类簇对应的已创建的各个展示行的有效剩余宽度；
134.所述从所述展示行中识别出当前的第一类展示行以及第二类展示行进一步包括：从所述当前待展示的类簇对应的已创建的各个展示行中，识别出所述当前待展示的类簇对应的第一类展示行以及第二类展示行；
135.所述判断第一类展示行中是否存在目标展示行进一步包括：判断所述当前待展示的类簇对应的第一类展示行中是否存在目标展示行；
136.所述判断第二类展示行是否为目标展示行进一步包括：判断所述当前待展示的类簇对应的第二类展示行是否为目标展示行。
137.a9.根据a8所述的方法，其中，将上一个待展示的类簇对应的最后创建的展示行，作为所述当前待展示的类簇对应的首个创建的展示行。
138.a10.根据a8或a9所述的方法，其中，所述确定当前待展示的类簇进一步包括：根据
类簇对应的展示次序指标值的平均值的大小顺序，确定当前待展示的类簇。
139.本发明还公开了：b11.一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如下操作：获取当前待展示的展示元素的宽度；确定已创建的各个展示行的有效剩余宽度；从所述展示行中识别出当前的第一类展示行以及第二类展示行；其中，所述第一类展示行为非最后创建的展示行，所述第二类展示行为最后创建的展示行；
140.判断第一类展示行中是否存在目标展示行；其中，所述目标展示行的有效剩余宽度大于或等于所述当前待展示的展示元素的宽度；
141.若是，从所述目标展示行中确定所述当前待展示的展示元素的展示位置；
142.若否，判断第二类展示行是否为目标展示行；若所述第二类展示行为目标展示行，则从所述目标展示行中确定所述当前待展示的展示元素的展示位置；若所述第二类展示行不是目标展示行，则创建新的展示行，在所述新的展示行中确定所述当前待展示的展示元素的展示位置。
143.b12.根据b11所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：按照第一类展示行的创建时间的先后顺序，依次遍历第一类展示行；
144.判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度；
145.若是，则将当前遍历的第一类展示行作为目标展示行；
146.若否，则遍历下一第一类展示行，并执行所述判断当前遍历的第一类展示行的有效剩余宽度是否大于或等于所述当前待展示的展示元素的宽度的步骤。
147.b13.根据b11或b12所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：针对于任一已创建的展示行，确定该展示行中最后一个确定展示位置的目标展示元素；
148.计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第二间距以及第三间距；其中，所述第二间距为相邻两个展示元素之间的间距，所述第三间距为展示元素的第一边与页面的第一边的最小间距；
149.则该展示行的有效剩余宽度为，第一间距-(第二间距 第三间距)。
150.b14.根据b11-b13中任一项所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：在确定出各个展示元素的展示位置之后，针对于任一展示行，确定该展示行中最后一个确定展示位置的目标展示元素；
151.计算目标展示元素的第一边与页面的第一边的第一间距，以及获取配置的第三间距；其中，所述第三间距为展示元素的第一边与页面的第一边的最小间距；
152.计算所述第一间距与所述第三间距的差值；
153.根据所述差值对该展示行中至少一个展示元素的宽度进行修正，并确定出修正处理后该展示行中各个展示元素的修正展示位置；其中，在修正处理后该展示行中第一间距与第三间距的修正后差值为预设差值。
154.b15.根据b14所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：判断所述差值是否小于预设阈值；
155.若是，确定该展示行为第三类展示行，并根据所述差值对该展示行中各个展示元素的宽度进行修正；
156.若否，确定该展示行为第四类展示行，并不对该展示行中展示元素的宽度进行修正。
157.b16.根据b15所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：判断创建的展示行中是否存在第四类展示行；
158.若是，调整创建的展示行的展示次序，以使所述第四类展示行的展示次序晚于第三类展示行的展示次序。
159.b17.根据b11-b16中任一项所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：在所述获取当前待展示的展示元素的宽度之前，获取各个展示元素的展示次序指标值；
160.基于各个展示元素的展示次序指标值，对各个展示元素进行聚类处理，以生成至少一个类簇；其中，每个类簇中包含至少一个展示元素。
161.b18.根据b17所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：确定当前待展示的类簇，从所述当前待展示的类簇中获取当前待展示的展示元素的宽度；
162.确定所述当前待展示的类簇对应的已创建的各个展示行的有效剩余宽度；
163.从所述当前待展示的类簇对应的已创建的各个展示行中识别出所述当前待展示的类簇对应的第一类展示行以及第二类展示行；
164.判断所述当前待展示的类簇对应的第一类展示行中是否存在目标展示行；
165.判断所述当前待展示的类簇对应的第二类展示行中是否为目标展示行。
166.b19.根据b18所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：将上一个待展示的类簇对应的最后创建的展示行，作为所述当前待展示的类簇对应的首个创建的展示行。
167.b20.根据b18或b19所述的电子设备，其中，所述可执行指令使所述处理器执行如下操作：根据类簇对应的展示次序指标值的平均值的大小顺序，确定当前待展示的类簇。
168.本发明还公开了：c21.一种计算机存储介质，所述存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如a1-a10中任一项所述的基于流式布局的页面展示方法对应的操作。