列表显示方法、装置及存储介质与流程

1.本技术涉及计算机技术领域，尤其涉及一种列表显示方法、装置及存储介质。


背景技术：

2.应用程序(application，app)的列表(例如，天猫和京东的搜索页面所呈现的列表)往往能展示出种类丰富的商品和服务等。列表在屏幕上显示时有多种显示样式，这些显示样式包括行显示样式，列显示样式，行列组合显示样式以及瀑布流显示样式等。
3.在传统的显示方式中，用户可以根据自己的习惯或者喜好在app列表的界面选择一种显示样式来显示列表。例如，用户可以直接选择采用行显示样式或者列显示样式来显示列表。但是，在某些情况下，仅靠用户的习惯或者喜好来选择的显示样式并不一定适合列表中的内容，显示的效果也未必很好。因此，亟需一种效果更好的列表显示方法。


技术实现要素：

4.本技术提供了一种列表显示方法、装置及存储介质，通过比较模块中的数据项的宽度与列表的宽度的关系，从而更好地确定适合列表的显示样式，提高列表的显示效果。
5.为实现上述目的，本技术实施例的第一方面提出了列表显示方法，该方法包括：
6.获取位于列表中待显示的模块的数据项；
7.根据模块中的数据项的宽度与列表的宽度的大小关系，从预设的多种候选显示样式中确定出待显示的目标显示样式；
8.按照目标显示样式显示该模块中的数据项；
9.其中，上述模块位于列表中，该模块用于在列表中呈现一类商品信息，该多种候选显示样式包括瀑布流显示样式和行列显示样式，行列显示样式包括行显示样式，列显示样式和行列混合显示样式中的至少一种。
10.瀑布流显示样式具体可以是双列瀑布流显示样式，也可以是多列瀑布流显示样式。或者，瀑布流显示样式具体也可以是双行瀑布流显示样式，也可以是双行瀑布流显示样式。
11.上述商品信息既可以包括购物app上呈现的实体商品信息(例如，药品)，也可以是虚拟商品信息(例如，网络课程)或者服务信息(例如，医疗服务信息)等等。
12.上述模块中的数据项可以是该模块中的任意一个数据项。例如，上述模块中的数据项可以是该模块中的第一个数据项或者最后一个数据项。由于一个模块中的各个数据项的宽度一般相同，因此，可以根据一个模块中的任意一个数据项的宽度与列表的宽度的关系来确定目标显示样式，确定出来的目标显示样式可以应用于该模块中的所有的数据项。
13.上述模块并不是某个装置或者设备中的逻辑功能模块，而是列表中用于显示或者呈现某一类商品信息的一块区域。
14.在一些实施例中，上述多种候选显示样式包括行列显示样式，则上述根据模块中的数据项的宽度与列表的宽度的大小关系，从预设的多种候选显示样式中确定出待显示的
目标显示样式，从多种候选显示样式中确定出目标显示样式，包括：
15.提取模块的数据项和列表的宽度数据；
16.在模块中的数据项的宽度与列表的宽度相同的情况下，确定目标显示样式为列显示样式。
17.上述列显示样式具体可以是指数据项按照从上到下的顺序排列进行显示。
18.在模块中数据项的宽度与列表的宽度相同的情况下，通过采用列显示样式，能够有效的减少列表中的空间浪费，提高显示效果。
19.在一些实施例中，上述多种候选显示样式包括行列显示样式，则上述根据模块中的数据项的宽度与列表的宽度的大小关系，从预设的多种候选显示样式中确定出待显示的目标显示样式，包括：
20.提取模块的数据项和列表的高度数据；
21.在模块中的数据项的高度与列表的高度相同的情况下，确定目标显示样式为行显示样式。
22.上述行显示样式具体可以是指数据项按照从左到右的顺序排列进行显示。
23.在模块中数据项的高度与列表的高度相同的情况下，通过采用行显示样式，能够有效的减少列表中的空间浪费，提高显示效果。
24.在一些实施例中，上述多种候选显示样式包括瀑布流显示样式，则上述根据模块中的数据项的宽度与列表的宽度的大小关系，从预设的多种候选显示样式中确定出待显示的目标显示样式，包括：
25.在模块中的数据项的宽度与列表的宽度不同的情况下，确定第一预设阈值；
26.在模块中的数据项的宽度小于或者等于上述第一预设阈值的情况下，确定目标显示样式为瀑布流显示样式。
27.在模块中数据项的宽度小于或者等于一定的阈值时，直接采用列显示样式会造成列表空间的浪费，这种情况下通过采用瀑布流显示样式，能够减少列表的空间浪费，提高显示效果。
28.上述第一预设阈值可以是预先设置的阈值。
29.在一些实施例中，第一预设阈值的取值为列表的宽度的一半。
30.在一些实施例中，第一预设阈值的取值为(w
‑
2*s)/2，其中，w为列表的宽度，s为列表采用瀑布流样式显示时相邻两列瀑布流之间的间隙距离。
31.上述w和s均为大于0的数值，w和s可以是预先设置的数值，w和s的大小具体可以用像素个数来表示。
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.图1为列表中包含的模块的示意图；
67.图2为模块内部组成的示意图；
68.图3为本技术实施例的列表显示方法的示意性流程图；
69.图4为确定目标显示样式的示意性流程图；
70.图5是确定当前数据项的显示位置的示意性流程图；
71.图6是模块1中放置的数据项的示意图；
72.图7是模块1中放置的数据项的示意图；
73.图8是本技术实施例的显示装置的示意性框图；
74.图9为本技术实施例的电子设备的硬件结构示意图。
具体实施方式
75.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本技术，并不用于限定本技术。
76.需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。
77.除非另有定义，本文所使用的所有的技术和科学术语与属于本技术的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本技术实施例的目的，不是旨在限制本技术。
78.在对本技术的列表显示方法进行介绍之前，先对本技术中的列表的基本情况进行介绍。
79.本技术中提及的列表可以是电子设备(例如，智能手机，平板电脑，个人数字助理(personal digital assistant，pda)，车载电脑，以及物联网设备等任意智能终端)app的显示界面中显示的商品，服务以及其他信息所构成的列表。例如，本技术的列表可以是智能手机购物app界面中呈现的商品界面。
80.上述列表中可以包括不同的模块，每个模块可以对应的显示一类内容或者商品，每个模块由顶部(header)，数据项(cell)和尾部(footer)构成，其中，顶部可以展示标题和当前分类数据的条数等信息，数据项可以展示每条数据文字，图片等内容。尾部可以展示“查看更多”等功能逻辑入口。一般来说，在一个模块中可以有多个数据项，一个数据项可以对应一个商品或者一条内容。
81.例如，在app搜索框中输入“咳嗽”的关键词后，得到的搜索结果包括与咳嗽相关的医疗服务，药品，那么，医疗服务的搜索结果可以对应一个模块，药品的搜索结果可以对应一个模块。而在药品的搜索结果对应的模块中，可以包括5个与治疗咳嗽相关的药品，那么，这5个与治疗咳嗽相关的药品分别对应5个数据项。
82.如图1所示，列表中包括模块1至模块3，那么，模块1显示的可以是与“咳嗽”相关的医疗服务的搜索结果，模块2显示的可以是“咳嗽”相关的药品的搜索结果，模块3显示的可
以是其他方面的搜索结果。
83.在本技术中，当模块中的数据项的宽度与列表的宽度满足不同的大小关系时可以选择不同的显示样式。每个模块可以根据其中的数据项的宽度与列表的宽度的大小关系来确定该模块对应的比较合适的显示样式，每个模块可以对应不同的显示样式。
84.如图2所示，模块1中包括顶部，数据项1至数据项6以及尾部。其中，数据项1至数据项6具体可以用于显示不同的商品信息。
85.例如，当模块1显示的是与咳嗽相关的药品时，数据项1至数据项6可以分别显示6种与治疗咳嗽有关的药品。
86.下面结合附图对本技术实施例的列表显示方法进行详细的介绍。
87.图3为本技术实施例的列表显示方法的示意性流程图。图3所示的方法可以由电子设备执行。这里的电子设备可以是智能手机，平板电脑，车载电脑，物联网设备等等。
88.图3所示的方法包括步骤s100至s300，下面对这三个步骤进行详细的介绍。
89.s100，获取位于列表中待显示的模块的数据项。
90.s200，根据模块中的数据项的宽度与列表的宽度的大小关系，从预设的多种候选显示样式中确定出待显示的目标显示样式。
91.其中，上述模块位于列表中，上述模块用于在列表中呈现一类商品信息。上述多种候选显示样式包括瀑布流显示样式和行列显示样式。上述行列显示样式包括行显示样式，列显示样式和行列混合显示样式中的至少一种。
92.上述商品信息既可以包括购物app上呈现的实体商品信息(例如，药品)，也可以是虚拟商品信息(例如，网络课程)或者服务信息(例如，医疗服务信息)等等。
93.上述行显示样式可以是指数据项按照从左到右的顺序排列成一行进行显示的样式，列显示样式可以是指数据项按照从上到下的顺序排列成一列进行显示的样式，行列混合显示样式可以是指数据项排列成多列多行的形式进行显示的样式。
94.应理解，本技术中的模块并不是装置或者设备中的逻辑功能模块，而是列表中用于显示或者呈现某一类内容或者商品的一块区域。
95.一般来说，一个模块中的各个数据项的宽度可以相同，因此，在上述步骤s200中，可以根据该模块中的任意一个数据项的宽度与列表的宽度的大小关系来确定目标显示样式，这样确定得到的目标显示样式可以作为该模块中的所有数据项的显示样式。或者，为了简化方案，在确定每个模块中的数据项对应的显示样式时，可以根据每个模块中的特定的数据项(可以是固定位置的数据项或者固定次序的数据项，例如，可以是模块中第一个数据项或者最后一个数据项)的宽度与列表的宽度的关系来确定目标显示样式。
96.在本技术实施例中，如果列表中存在多个模块，则可以采用本技术实施例的列表显示方法来确定每个模块对应的显示样式，最后按照每个模块对应的显示样式来呈现该模块中的数据项。
97.例如，列表中包括模块1，模块2和模块3，通过本技术实施例的列表显示方法确定模块1和模块2对应的目标显示样式为列显示样式，模块3对应的目标显示样式为瀑布流显示样式。那么，接下来，列表中的模块1和模块2中的数据项以列显示样式进行显示，而模块3中数据项以瀑布流显示样式进行显示。
98.s300，按照目标显示样式显示模块中的数据项。
99.如果上述步骤s300是处理器执行的话，则处理器在确定了以目标显示样式呈现上述模块中的数据项之后，可以将相关的数据传送到显示屏中进行显示。如果执行上述步骤s300的装置中有显示器的话，则通过该装置的显示器可以执行步骤s300，从而按照目标显示样式显示模块中的数据项。
100.假如一个模块中包括6个数据项，那么，在根据该模块中的一个数据项确定了目标显示样式之后，可以以该目标显示样式显示该模块中的6个数据项。
101.下面结合图4对步骤s200中确定目标显示样式的过程进行详细的介绍。
102.图4为确定目标显示样式的示意性流程图。
103.图4所示的过程包括步骤s201至步骤s206，下面对这些步骤进行详细的介绍。
104.s201，表示判断过程的开始。
105.s202，确定模块中的数据项的宽度与列表的宽度是否相同。
106.s203，如果模块中的数据项的宽度与列表的宽度相同(s202中的判断结果为“是”)，则确定目标显示样式为列显示样式。
107.在模块中数据项的宽度与列表的宽度相同的情况下，通过采用列显示样式，能够有效的减少列表中的空间浪费，提高显示效果。
108.s204，如果模块中的数据项的宽度与列表的宽度不相同，则继续判断模块中的数据项的宽度是否小于或者等于第一预设阈值。
109.s205，如果模块中的数据项的宽度小于或者等于第一预设阈值的话(s204中的判断结果为“是”)，则确定目标显示样式为瀑布流显示样式。
110.应理解，在上述步骤s205中，也可以只在模块中的数据项的宽度小于第一预设阈值的情况下才确定目标显示样式为瀑布流显示样式。
111.在模块中数据项的宽度小于或者等于一定的阈值时，直接采用列显示样式会造成列表空间的浪费，这种情况下通过采用瀑布流显示样式，能够减少列表的空间浪费，提高显示效果。
112.s206，表示判断过程结束。
113.上述第一预设阈值可以是预先设置好的数值，该第一预设阈值的取值可以是列表的宽度的一半。
114.可选地，上述第一预设阈值还可以是比列表宽度的一半更小的数值。
115.具体地，上述第一预设阈值的取值可以为(w
‑
2*s)/2，其中，w为列表的宽度，s为列表采用瀑布流样式显示时相邻两列瀑布流之间的间隙距离，s为预设数值。
116.如图2所示，w表示列表的宽度，s表示瀑布流样式显示时相邻两列瀑布流之间的间隙距离，w0为数据项1的宽度，在图2中，数据项1的宽度w0等于(w
‑
2*s)/2，因此，图2中模块1中的数据项的目标显示样式为瀑布流显示样式。因此，对于图2中模块1中的各个数据项，可以采用瀑布流显示样式来进行显示。
117.上述第一预设取值的单位具体可以是像素。
118.在瀑布流显示样式具体为双列瀑布流显示样式时，并且确定目标显示样式为双列瀑布流显示样式的情况下，上述方法的步骤s300中还可以包括确定模块中的数据项在模块中的显示位置的过程。
119.可选地，上述步骤s300中按照目标显示样式显示模块中的数据项，具体包括：
120.根据第一数据项底部与模块的顶部的上边界之间的距离，以及第二数据项底部与模块的顶部的上边界之间的距离的大小关系，确定待显示的当前数据项在模块中的显示位置。
121.其中，上述第一数据项和第二数据项是模块中位于当前数据项之前显示的两个数据项。
122.这里的当前数据项是在上述第一数据项和第二数据项之后即将显示的数据项。也就是说，在上述模块中，在显示了第一数据项和第二数据项之后，就要显示当前数据项了，这里是要根据第一数据项和第二数据项在模块中的具体位置来确定当前数据项的具体位置。
123.本技术中，在确定当前数据项的显示位置时，可以将当前数据项放在第一数据项和第二数据项中底部离模块的顶部距离较短的数据项的下方，以节省模块内的显示空间，从而合理利用模块内的显示空间。
124.应理解，在上述根据第一数据项和第二数据项的底部分别与模块的顶部的距离来确定当前数据项的位置之前，可以先获取上述第一数据项和第二数据项在模块中的位置信息。
125.本技术中，第一数据项和第二数据项的具体所处位置可以用某个坐标系下的坐标值来表示，具体地，可以以列表的左上角为坐标原点，在该坐标系下计算出第一数据项和第二数据项的位置。其中，上述第一数据项底部与模块的顶部的上边界之间的距离为第一数据项底部在该坐标系下的纵坐标的数值，上述第二数据项底部与模块的顶部的上边界之间的距离为第二数据项底部在该坐标系下的纵坐标的数值。
126.例如，如图6所示，上述第一数据项底部与模块的顶部的上边界之间的距离为y1，上述第二数据项底部与模块的顶部的上边界之间的距离为y2。
127.下面结合图5对步骤s300中的具体过程进行介绍。
128.图5是确定当前数据项的显示位置的示意性流程图。
129.如图5所示，上述s300具体包括：
130.s301，表示确定过程的开始。
131.s302，确定第一数据项底部与模块的顶部的上边界的间距是否大于第二数据项底部与模块的顶部的上边界的间距。
132.s303，如果s301中的判断结果为“否”的情况下，则确定当前数据项显示在第一数据项的下方。
133.s304，如果s302中的判断结果为“是”的情况下，则确定当前数据项显示在第二数据项的下方。
134.应理解，如果第一数据项的底部与模块的尾部之间的距离与第二数据项底部与模块的尾部之间的距离相等的情况下，可以随机确定将当前数据项显示在第一数据项的下方或者第二数据项的下方。
135.通过上述过程，在确定每个数据项的放置位置时，主要是将当前数据项放在模块中已显示的数据项中数据项的底部离模块的尾部更远距离的数据项的下方(或者是将当前数据项放置在模块中已显示的数据项中数据项的底部离模块的顶部距离更近的数据项的下方)。这样能够更好的利用列表空间，提高显示效率(在有限空间内显示更多的内容，减少
显示空间的浪费)。
136.应理解，上述s301至s304只是本技术实施例中一种可能的实现方式，实际上在根据第一数据项和第二数据项的位置来确定当前数据项的位置时，还可以根据第一数据项底部与模块的尾部之间的距离和第二数据项底部与模块的尾部之间的距离的关系来判定。
137.具体地，在第一数据项底部与模块的尾部之间的距离小于第二数据项底部与模块的尾部之间的距离的情况下，确定当前数据项显示在第二数据项的下方。
138.而在第一数据项底部与模块的尾部之间的距离大于第二数据项底部与模块的尾部之间的距离的情况下，确定当前数据项显示在第一数据项的下方。
139.应理解，本技术实施例中，瀑布流显示样式具体可以是双列瀑布流显示样式，也可以是多列瀑布流显示样式。当瀑布流显示样式为多列瀑布流显示样式时，也可以按照图5所示的方法根据已显示的数据项来确定当前数据项的位置。例如，在三列瀑布流显示样式下，模块1中已经确定了数据项1，数据项2和数据项3的位置，接下来需要确定数据项4的位置。那么，可以比较这三个数据项的底部离模块1的尾部的下边界的距离，如果数据项1的底部离模块1的尾部的下边界的距离最远的话，则可以将数据项4放置在数据项1的下方。
140.本技术中，瀑布流显示样式具体也可以是双行瀑布流显示样式，也可以是多行瀑布流显示样式。
141.当瀑布流显示样式具体为双行瀑布流显示样式或者多行瀑布流显示样式时，确定当前数据项的放置位置的方式与上述确定瀑布流显示样式为双列瀑布流显示样式或者多列瀑布流显示样式中确定当前数据项的位置的方式类似，不同的地方在于，这里是按照行进行排列显示，而双列瀑布流显示样式或者多列瀑布流显示样式中是按照列进行排列显示。
142.下面再结合图6和图7对确定数据项的放置位置进行说明。
143.图6是模块1中放置的数据项的示意图。
144.如图6所示，模块中的数据项1和数据项2的放置位置已经确定(数据项1和数据项2是列表中的前两个显示的数据项，在确定放置位置时可以采用随机确定的方式，具体地，如图6所示，将数据项1放在列表的左上角，将数据项2放置在列表的右上角)，在确定后续的数据项的放置位置时可以根据数据项1和数据项2的顶部所处的位置来确定。
145.具体地，如图6所示，y1为数据项1的最底部的纵坐标，y2为数据项2的最底部的纵坐标，y1小于y2，因此，与数据项1相比，数据项2距离显示模块的尾部的下边界的距离更近。因此，可以确定下一个要显示的数据项放置在数据项1的下方。
146.图7是模块1中放置的数据项的示意图。
147.如图7所示，根据上述判断过程，数据项3可以放置在数据项1的正下方。
148.在本技术实施例的列表显示方法之外，还可以确定列表中各个模块所在的位置，以及每个模块中的各个数据项的位置，并保存这些位置信息。
149.接下来可以通过预先定义的接口(例如，layoutattributesforelementsinrect接口)获取列表中各个模块的位置信息以及列表中的数据项要采用的显示样式信息，最终根据这些信息来呈现列表。
150.如图1所示，可以以列表的左上角为坐标原点，逐个计算每个模块的坐标。由于各个模块的宽和高可以是预先设定好的，因此，在列表中确定了坐标原点之后，可以根据各个
模块的宽和高来确定每个模块在坐标系中的坐标位置了(例如，可以确定每个模块的四周顶点的坐标)。如图1所示，在确定了模块1的坐标之后，接下来，可以根据模块1的坐标和模块2的尺寸来确定模块2的坐标。
151.在确定了每个模块的坐标之后，还要进一步确定每个模块内部的顶部，尾部以及数据项的坐标。如图2所示，以模块1为例，在计算模块1的坐标时，需要逐个计算模块1中的顶部，尾部以及各个数据项的坐标。由于模块1的四周顶点的坐标已知，模块1的顶部、尾部以及各个数据项的尺寸已知，因此，可以在坐标系中确定出顶部的左下角和右下角的坐标，接下来，可以通过顶部的左下角和右下角的坐标来计算数据项1和数据项2的坐标了。
152.在确定了数据项1和数据项2的坐标之后，可以再计算数据项3和数据项4的坐标，直到完成所有的数据项的坐标的计算。在完成了数据项5和数据项6的坐标的计算之后，根据数据项5和数据项6以及尾部的尺寸可以确定尾部的坐标。
153.因此，通过上述这些过程可以确定每个模块所处的位置以及每个模块内的数据项所在的位置。接下来，就可以根据这些位置信息以及显示样式信息来显示列表了。
154.在本技术中，可以自定义列表布局，根据自身需求计算列表元素的坐标，交由系统提供列表控件进行渲染。列表可以采用ios系统提供的原生uicollectionview来自定义布局类，需要继承列表对应的布局基类uicollectionviewflowlayout。
155.此外，在本技术中，可以在自定义布局里动态的计算列表中的各个模块，以及模块中的各个数据项的坐标。
156.以两列瀑布流显示样式显示数据项为例，自定义布局动态计算数据项的坐标的具体过程如下：
157.(1)在自定义布局中添加2个浮点变量，用于保存左右2列瀑布流显示样式最下面一个元素底部位置，变量名为maxy1、maxy2。
158.(2)遍历所有分类模块，计算各个数据项(这里的数据项也可以称为元素)的坐标，这是一个循环过程。
159.例如，显示列表中包括模块1至模块3，那么，需要遍历模块1至模块3计算每个模块中的各个数据项的坐标。
160.(3)获取当前模块的顶部的宽width和高height，以列表的左上角为坐标原点，将当前模块中位于左上角的数据项的左上角位置的坐标设置为(0,max(maxy1,maxy2))，当前模块中位于右上角的数据项的右下角位置的坐标设置为(width,max(maxy1,maxy2) height)，接下来，同步maxy1和maxy2变量为max(maxy1,maxy2) height。
161.(4)遍历当前模块中所有数据项，这也是一个循环过程。
162.通过上述过程(1)至(4)可以确定每个模块所处的位置以及每个模块内的数据项所在的位置。接下来，就可以根据这些位置信息以及显示样式信息来显示列表了。
163.本技术实施例还提供了一种显示装置，该显示装置能够以目标显示样式来呈现列表中的数据项。下面结合图8进行详细说明。
164.图8是本技术实施例的显示装置的示意性框图。图8所示的显示装置600包括：
165.获取单元601，用于获取位于列表中待显示的模块的数据项；
166.处理单元602，用于根据模块中的数据项的宽度与列表的宽度的大小关系，从预设的多种候选显示样式中确定出待显示的目标显示样式；
167.显示单元603，用于按照目标显示样式显示模块中的数据项；
168.其中，上述模块用于呈现一类商品信息，上述多种候选显示样式包括瀑布流显示样式和行列显示样式，行列显示样式包括行显示样式，列显示样式和行列混合显示样式中的至少一种。
169.上述处理单元602确定目标显示样式的过程具体可以是上文中介绍的本技术实施例的列表显示方法中的过程。
170.这里的显示装置600具体可以是智能手机，平板电脑，pda，车载电脑，以及物联网设备等任意智能终端。
171.本技术提出的显示装置，通过比较模块中的数据项的宽度与列表的宽度的大小关系，能够确定出与模块中的数据项匹配的显示样式，从而能够以合适的显示样式来显示该模块中的数据项，可以提高列表的显示效果。
172.本技术实施例还提供了一种电子设备，该电子设备能够执行本技术实施例的列表显示方法中的各个过程。下面结合图9对本技术实施例的电子设备进行详细的介绍。
173.图9为本技术实施例的电子设备的示意性框图。
174.如图9所示，电子设备700可以包括处理器701和存储器702。其中，存储器702存储有程序，当程序被处理器701执行时该处理器701能够执行本技术实施例的列表显示方法的各个步骤。
175.上述电子设备700可以是包括手机、平板电脑、pda，车载电脑等任意智能终端。
176.上述处理器701可以采用通用的中央处理器(central processing unit，cpu)、微处理器、应用专用集成电路(application specific integrated circuit，asic)、或者一个或多个集成电路等方式实现。
177.上述存储器702可以采用只读存储器(read only memory，rom)、静态存储设备、动态存储设备或者随机存取存储器(random access memory，ram)等形式实现。
178.存储器702可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器702中，并由处理器701来调用执行本技术实施例的列表显示方法。
179.上述存储器702可以作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。
180.此外，上述存储器702可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
181.上述电子设备700还可以包括输入/输出接口703，用于实现信息输入及输出。
182.上述电子设备还可以包括通信接口704和总线705。
183.其中，通信接口704用于实现本设备与其他设备的通信交互，可以通过有线方式(例如，通用串行总线(universal serial bus，usb)、网线等)实现通信，也可以通过无线方式(例如移动网络、无线局域网(wireless fidelity，wifi)、蓝牙等)实现通信。
184.总线705用于在设备的各个组件(例如处理器701、存储器702、输入/输出接口703和通信接口704)之间传输信息。
185.另外，处理器701、存储器702、输入/输出接口703和通信接口704可以通过总线705实现彼此之间在设备内部的通信连接。
186.本技术实施例还提供了一种计算机可读存储介质，该计算机可读存储有计算机程序，在该计算机程序被计算机执行时，该计算机用于本技术实施例的列表显示方法的各个步骤。
187.本技术实施例描述的实施例是为了更加清楚的说明本技术实施例的技术方案，并不构成对于本技术实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本技术实施例提供的技术方案对于类似的技术问题，同样适用。
188.本领域技术人员可以理解的是，图1
‑
8中示出的技术方案并不构成对本技术实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。
189.以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
190.本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。
191.本技术的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
192.应当理解，在本技术中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“a和/或b”可以表示：只存在a，只存在b以及同时存在a和b三种情况，其中a，b可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。
193.在本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
194.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
195.另外，在本技术各个实施例中的各功能单元可以集成在一个处理单元中，也可以
是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
196.集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本技术的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括多指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本技术各个实施例方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(read
‑
only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序的介质。
197.以上参照附图说明了本技术实施例的优选实施例，并非因此局限本技术实施例的权利范围。本领域技术人员不脱离本技术实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本技术实施例的权利范围之内。