CN110598026A - 图片列表的显示方法、装置及终端设备 - Google Patents

Abstract

本发明提供一种图片列表的显示方法、装置及终端设备。该图片列表的显示方法包括获取的图片列表的框架数据，渲染图片列表的列表结构；基于用户的操作指令，确定目标位置；根据该列表结构，获取与该目标位置对应的待显示图片的详细信息；根据该详细信息显示待显示图片。该方法节省了用户的时间，提高了浏览图片列表的效率，提高了用户体验。

Description

图片列表的显示方法、装置及终端设备

技术领域

本发明涉及计算机软件技术，尤其涉及一种图片列表的显示方法、装置及终端设备。

背景技术

当前，许多应用软件中都具有图片列表页，用以批量展示用户的大量图片，例如各类社交软件中的个人相册。

现有技术中的图片列表页是采用分页式的方法展示固定大小的图片缩略图，随着用户的浏览进度逐页加载图片，例如用户在终端设备上滑动屏幕浏览应用软件中的个人相册，用户滑动屏幕时，加载固定大小的一页图片，待用户继续滑动，则继续加载下一页图片。

采用这种分页式的方法，若用户想要浏览图片列表中与终端设备屏幕上当前显示的图片间隔较远的某一张图片，需要连续不断的翻页直至图片列表按分页加载到该张图片，在这个过程中用户需要浪费大量的时间等待图片列表逐页加载，使得用户无法快速查看到想要浏览的图片，用户体验较差。

发明内容

本发明提供一种图片列表的显示方法、装置及终端设备，以提高用户浏览图片的效率，提高用户体验。

第一方面，本发明提供一种图片列表的显示方法，包括：

根据获取的图片列表的框架数据，渲染图片列表的列表结构；该列表结构中包括图片列表中每个图片的标识和位置之间的对应关系，该框架数据中包括每个图片的标识和宽高信息；

基于用户的操作指令，确定目标位置；

根据该列表结构，获取与该目标位置对应的待显示图片的详细信息；

根据该详细信息显示待显示图片。

可选的，根据获取的图片列表的框架数据，渲染图片列表的列表结构，包括：

向服务端发送第一请求，该第一请求用于请求该框架数据；

接收该服务端发送的该框架数据；

根据该框架数据，渲染图片列表的列表结构。

可选的，根据该列表结构，获取与该目标位置对应的待显示图片的详细信息，包括：

根据该列表结构，确定与该目标位置对应的待显示图片的标识；

向服务端发送第二请求，该第二请求中携带有待显示图片的标识，该第二请求用于请求待显示图片的详细信息；

接收该服务端发送的待显示图片的详细信息。

可选的，该接收该服务端发送的该框架数据，包括：

接收该服务端发送的第一框架数据；

向该服务端发送至少一个第三请求，该至少一个第三请求用于请求第二框架数据，该第二框架数据为图片列表的框架数据中除该第一框架数据以外的其他框架数据；

接收该服务端发送的每个第三请求各自对应的第二框架数据。

可选的，该接收该服务端发送的第一框架数据，包括：

通过主线程接收该服务端发送的第一框架数据。

可选的，该接收该服务端发送的每个第三请求各自对应的第二框架数据，包括：

通过子线程接收该服务端发送的每个第三请求各自对应的该第二框架数据。

可选的，根据获取的图片列表的框架数据，渲染图片列表的列表结构，包括：

根据该第一框架数据中每个图片的标识和宽高信息渲染第一列表结构；

根据该第二框架数据中每个图片的标识和宽高信息渲染第二列表结构；

将该第二列表结构添加在该第一列表结构中，获得图片列表的列表结构。

可选的，根据获取的图片列表的框架数据，渲染图片列表的列表结构，包括：

根据预设规则对该框架数据进行分组，获得至少一个分组；其中，该至少一个分组中每个分组内的图片具有相同的属性；

针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组，获得图片列表的列表结构。

可选的，针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组之前，该方法还包括：

对该至少一个分组进行排序；

针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组，包括：

针对排序后的该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息，对该分组进行渲染。

可选的，根据该列表结构，获取与该目标位置对应的待显示图片的详细信息之前，该方法还包括：

记录每个分组在该列表结构中的位置；

根据该列表结构，获取与该目标位置对应的待显示图片的详细信息，包括：

根据每个分组在该列表结构中的位置，确定该目标位置对应的待显示分组；

获取待显示分组中的待显示图片的详细信息。

可选的，根据每个分组在该列表结构中的位置，确定该目标位置对应的待显示分组，包括：

根据该用户的操作指令确定操作的滑动方向；

若该滑动方向为向上，则将该目标位置对应的目标分组和该目标位置之前的第一数量的分组确定为待显示分组；

若该滑动方向为向下，则将该目标位置对应的目标分组和该目标位置之后的第二数量的分组确定为待显示分组。

可选的，该记录每个分组在该列表结构中的位置之后，该方法还包括：

根据每个分组的属性生成目录；该目录中的每个目录项与每个分组一一对应；

该基于用户的操作指令，确定目标位置，包括：

接收用户输入的操作指令，该操作指令中包括该用户选择的目标目录项；

确定该目标目录项对应的分组的目标位置。

第二方面，本发明提供一种图片列表的显示装置，包括：

渲染模块，用于根据获取的图片列表的框架数据，渲染图片列表的列表结构；该列表结构中包括图片列表中每个图片的标识和位置之间的对应关系，该框架数据中包括每个图片的标识和宽高信息；

确定模块，用于基于用户的操作指令，确定目标位置；

获取模块，用于根据该列表结构，获取与该目标位置对应的待显示图片的详细信息；

显示模块，用于根据该详细信息显示待显示图片。

可选的，该渲染模块用于：

向服务端发送第一请求，该第一请求用于请求该框架数据；

接收该服务端发送的该框架数据；

根据该框架数据，渲染图片列表的列表结构。

可选的，该获取模块用于：

根据该列表结构，确定与该目标位置对应的待显示图片的标识；

向服务端发送第二请求，该第二请求中携带有待显示图片的标识，该第二请求用于请求待显示图片的详细信息；

接收该服务端发送的待显示图片的详细信息。

可选的，该渲染模块还具体用于：

接收该服务端发送的第一框架数据；

向该服务端发送至少一个第三请求，至少一个第三请求用于请求第二框架数据，该第二框架数据为图片列表的框架数据中除该第一框架数据以外的其他框架数据；

接收该服务端发送的每个第三请求各自对应的第二框架数据。

可选的，该渲染模块还具体用于：

通过主线程接收该服务端发送的第一框架数据。

可选的，该渲染模块还具体用于：

通过子线程接收该服务端发送的每个第三请求各自对应的该第二框架数据。

可选的，该渲染模块用于：

根据该第一框架数据中每个图片的标识和宽高信息渲染第一列表结构；

根据该第二框架数据中每个图片的标识和宽高信息渲染第二列表结构；

将该第二列表结构添加在该第一列表结构中，获得图片列表的列表结构。

可选的，该渲染模块用于：

根据预设规则对该框架数据进行分组，获得至少一个分组；其中，该至少一个分组中每个分组内的图片具有相同的属性；

针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组，获得图片列表的列表结构。

可选的，针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组之前，该渲染模块还用于：

对该至少一个分组进行排序；

相应的，渲染模块还用于：

针对排序后的该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息，对该分组进行渲染。

可选的，该渲染模块还用于在该获取模块根据该列表结构，获取与该目标位置对应的待显示图片的详细信息之前，记录每个分组在该列表结构中的位置；

该获取模块用于：

根据每个分组在该列表结构中的位置，确定该目标位置对应的待显示分组；

获取待显示分组中的待显示图片的详细信息。

可选的，该获取模块还用于：

根据该用户的操作指令确定操作的滑动方向；

若该滑动方向为向上，则将该目标位置对应的目标分组和该目标位置之前的第一数量的分组确定为待显示分组；

若该滑动方向为向下，则将该目标位置对应的目标分组和该目标位置之后的第二数量的分组确定为待显示分组。

可选的，该渲染模块还用于，在记录每个分组在该列表结构中的位置之后，根据每个分组的属性生成目录；该目录中的每个目录项与每个分组一一对应；确定模块用于：

接收用户输入的操作指令，该操作指令中包括该用户选择的目标目录项；

确定该目标目录项对应的分组的目标位置。

第三方面，本发明提供一种终端设备，包括存储器和处理器；该存储器和该处理器连接；

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

该处理器，用于在计算机程序被执行时，实现如上述第一方面中的图片列表的显示方法。

第四方面，本发明提供一种存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现如上述第一方面中的图片列表的显示方法。

本发明提供的图片列表的显示方法、装置和终端设备，通过获取的图片列表的框架数据，渲染图片列表的列表结构；基于用户的操作指令，确定目标位置；根据该列表结构，获取与该目标位置对应的待显示图片的详细信息；根据该详细信息显示待显示图片。该方法通过图片列表的整体框架数据渲染列表结构，在用户浏览图片列表时，用户可以直接通过操作指令，如滑动屏幕到达想要浏览的位置，浏览该位置对应的图片，而无需多次操作并等待图片列表逐页加载，节省了用户的时间，提高了浏览图片列表的效率，提高了用户体验。此外，本发明的方法中还可根据分组生成目录，通过用户点击目录的操作，可以快速定位并让列表滚动到相应的目标位置，进一步提高了用户浏览图片列表的效率。

附图说明

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

图1为本发明提供的一种图片列表的显示方法的流程示意图一；

图2为本发明提供的一种图片列表的显示示意图一；

图3为本发明提供的一种图片列表的显示方法的流程示意图二；

图4为本发明提供的一种图片列表的显示示意图二；

图5为本发明的提供一种图片列表的显示装置的结构示意图；

图6为本发明提供的一种终端设备的结构示意图。

具体实施方式

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

目前，在许多应用软件中都具有图片列表页，用以批量展示用户的大量图片，例如各类社交软件中的个人相册，用户可以通过滑动屏幕等方式浏览图片列表。为了避免用户浏览过程中长时间等待图片分页加载，提高用户浏览效率，提升用户体验，本发明通过预先加载图片列表的整体框架数据的方式生成图片列表的列表结构，之后再随着用户的操作加载列表结构相应位置的图片的详细信息，从根本上避免了用户翻页中浪费的时间成本。为此，本发明提供一种图片列表的显示方法。该方法的执行主体为图片列表的显示装置，该装置可以通过软件和/或硬件的方式实现，例如该装置可以为终端设备。

图1为本发明提供的一种图片列表的显示方法的流程示意图一。如图1所示，该方法包括：

S101、根据获取的图片列表的框架数据，渲染图片列表的列表结构。

其中，该列表结构中包括图片列表中每个图片的标识和位置之间的对应关系，该框架数据中包括每个图片的标识和宽高信息。

图片列表的列表结构是图片列表的整体布局，列表结构中仅体现图片列表中每个图片的位置。图片列表的框架数据中包括了图片列表中每个图片的标识和宽高信息，在获取到图片列表的框架数据后，即可根据每个图片的标识和宽高信息渲染出图片列表的列表结构，也就是获得了图片列表中每个图片的位置。示例的，若图片列表包括19000张图片，获取该19000张图片的框架数据，即可根据该19000张图片中每个图片的标识和宽高信息渲染出该图片类别的列表结构，也就是确定了该19000张图片中每个图片的位置。

S102、基于用户的操作指令，确定目标位置。

用户在浏览图片列表时会通过终端设备输入操作指令，例如通过滑动终端设备的屏幕或者点击屏幕等来浏览图片列表中的图片，根据用户的操作指令可以确定出用户想要浏览的图片的位置，即目标位置。

S103、根据该列表结构，获取与该目标位置对应的待显示图片的详细信息。

S104、根据该详细信息显示待显示图片。

列表结构中包括图片的标识和位置之间的对应关系，因此在确定上述目标位置之后，即可确定该目标位置上所对应的待显示图片。由于根据框架数据所得到的列表结构仅是图片列表的整体布局而不包括每个图片的详细信息，因此还需要获取待显示图片的详细信息，详细信息用于显示图片的具体内容，示例的详细信息可以为图片链接、图片资源、图片上的描述文字等，获取该详细信息后，即可根据该详细信息显示待显示图片。

示例地，图2为本发明提供的一种图片列表的显示示意图一。如图2所示，终端设备的屏幕中初始时显示的图片为图片列表中的图片1-图片7，由于图片列表的完整的列表结构已经加载，因此用户可以直接滑动手机屏幕至整个列表结构中的任意位置，例如，用户滑动屏幕至某一位置，该位置对应图片列表中图片801-图片806，则此时终端设备的屏幕即显示出了列表结构中图片801-图片806的框架，之后终端设备获取该图片801-图片806的详细信息以显示图片801-图片806。

本实施提供的图片列表的显示方法，通过获取的图片列表的框架数据，渲染图片列表的列表结构；基于用户的操作指令，确定目标位置；根据该列表结构，获取与该目标位置对应的待显示图片的详细信息；根据该详细信息显示待显示图片。该方法通过图片列表的整体框架数据渲染列表结构，在用户浏览图片列表时，用户可以直接通过操作指令，如滑动屏幕到达想要浏览的位置，浏览该位置对应的图片，而无需多次操作并等待图片列表逐页加载，节省了用户的时间，提高了浏览图片列表的效率，提高了用户体验。

在上述实施例的基础上，对S101中根据获取的图片列表的框架数据，渲染图片列表的列表结构做进一步说明，本实施例中的框架数据可以存储在图片列表的显示装置的本地，或者也可以存储在远端的服务端，例如可以存储在云服务器中。若框架数据存储在服务端，则S101可以包括：向服务端发送第一请求，该第一请求用于请求该框架数据；接收服务端发送的框架数据；根据该框架数据，渲染图片列表的列表结构。

进一步地，考虑到服务端的处理能力和性能压力，为了保证图片列表的加载速度，可以将框架数据分批次进行处理，具体的，上述接收服务端发送的框架数据，包括：接收该服务端发送的第一框架数据；向该服务端发送至少一个第三请求，该至少一个第三请求用于请求第二框架数据，该第二框架数据为图片列表的框架数据中除该第一框架数据以外的其他框架数据；接收该服务端发送的每个第三请求各自对应的第二框架数据。

示例地，图片列表中包括19000张图片，图片列表的显示装置如终端设备，向服务端发送第一请求以请求该图片列表的框架数据，服务端首先向服务端发送1000条框架数据，同时返回给终端设备该图片列表一共有19000张图片，该1000条框架数据为该19000张图片中前1000张图片的框架数据，即第一框架数据。之后，终端设备向服务端发送第三请求，用以请求第一框架数据以外的其他框架数据。具体的，服务端可以配置每次发送的框架数据的条数，例如，服务端配置为第一次发送1000条数据，之后每次发送5000条数据，则终端设备向服务端发送四个第三请求即可获取到全部的框架数据，该四个第三请求可以并行处理，以提高加载速度。

在具体实现中，终端设备和服务端可以通过请求和响应中所携带的参数来实现上述对发送数据条数进行控制的过程。示例的，终端设备向服务端发送的请求中可以携带boundary和length两个参数，其中，boundary用于指示请求的框架数据的起始值，length用于指示请求的框架数据的数量，若该两个参数均为空，则服务端默认终端设备是第一次请求框架数据，即该请求为第一请求。示例的，若终端设备向服务端发送的第一请求中该两个参数均为空，则服务端按照第一次发送1000条数据的配置向服务端发送该1000条框架数据，同时，还向终端设备返回next_boundary、page_length、total这三个参数，其中，next_boundary用于指示终端设备下一次请求需要请求的boundary，page_length用于指示服务端在第一次之后每次发送框架数据的条数，total为框架数据的总条数。上述例子中，服务端向终端设备发送第一框架数据即前1000条框架数据，并且向终端设备返回next_boundary为1001、page_length为5000、total为19000。终端设备接收到后，根据上述参数即可计算出还需要发送三次第三请求才能够获得全部框架数据。若终端设备发送的一个第三请求中boundary为1001、length为5000，则可收到服务端发送的第1001-6000这5000条数据。

上述方法通过分批返回框架数据，降低了服务端处理数据的压力，同时由于第一次返回框架数据的数量较少，可以更快速地加载出该部分数据的列表结构。

为了更进一步的提高用户体验，本实施例中可以通过不同的线程请求框架数据。可选的，通过主线程接收该服务端发送的第一框架数据。而在接收到第一框架数据后，可以通过子线程发送至少一个第三请求用于请求第二框架数据，并通过子线程接收该服务端发送的每个第三请求各自对应的该第二框架数据。该至少一个第三请求可以并发进行请求，由于通过子线程处理第三请求，其不会阻塞主线程，可以避免用户浏览界面的卡顿。

与分批次接收框架数据相应的，终端设备可以根据分批次接收到的框架数据进行列表结构的渲染，具体的，S101中根据获取的图片列表的框架数据，渲染图片列表的列表结构，可以包括：根据该第一框架数据中每个图片的标识和宽高信息渲染第一列表结构；根据该第二框架数据中每个图片的标识和宽高信息渲染第二列表结构；将该第二列表结构添加在该第一列表结构中，获得图片列表的列表结构。

通过上述分批次渲染列表结构，对于用户来说，用户在浏览第一列表结构中包括的图片时，后续的第二列表结构自动加载出来，第一列表结构加载速度更快，而第二列表结构的加载过程用户并不会感知到，进一步提高了用户体验。

在上述实施例的基础上，对S103中根据该列表结构，获取与该目标位置对应的待显示图片的详细信息做进一步说明，本实施例中的图片的详细信息可以存储在图片列表的显示装置如终端设备的本地，或者也可以存储在远端的服务端，例如可以存储在云服务器中。

若图片的详细信息存储在服务端，则S103包括：根据该列表结构，确定与该目标位置对应的待显示图片的标识；向服务端发送第二请求，该第二请求中携带有待显示图片的标识，该第二请求用于请求待显示图片的详细信息；接收该服务端发送的待显示图片的详细信息。若用户滑动手机屏幕至图片列表中某一位置，该位置对应图片列表中第100-105张图片，则终端设备向服务端发送携带有该第100-105张图片的标识的第二请求，服务端接收到该请求后向终端设备发送该第100-105张图片的详细信息。

图3为本发明提供的一种图片列表的显示方法的流程示意图二。如图3所示，S101中根据获取的图片列表的框架数据，渲染图片列表的列表结构，包括：

S301、根据预设规则对该框架数据进行分组，获得至少一个分组。

其中，该至少一个分组中每个分组内的图片具有相同的属性。

实际应用中，图片列表通常按照一定的规律进行显示，例如按照时间和地点进行分组显示。本实施例中，框架数据中还包括图片列表中每个图片对应的时间和地点，在获取到框架数据后，通过遍历全部图片的方式，按照图片对应的时间和地点对框架数据进行分组，将时间和地点相同的图片分为一个组。这样，每个分组中都包括了该分组的时间、地点和所有图片的信息。示例的，时间可以为年-月的形式，该时间可以根据图片的时间戳计算生成。可以理解的是，对框架数据进行分组不局限于按照图片对应的时间和地点进行分组，还可以按照图片所具有的其他任意属性进行分组，例如，按照图片大小进行分组，按照图片作者进行分组，按照图片类型进行分组等，本发明对此不作具体限定。

S302、针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组，获得图片列表的列表结构。

分完组之后，即可将每个分组内的所有图片按照其宽高信息进行布局渲染，渲染可以采用预先设置的布局模板进行，完成对所有分组的渲染即可获得图片列表的列表结构。

本实施例提供的图片列表的显示方法，通过对框架数据进行分组，对分组后的框架数据进行选择，获得按照分组排列的列表结构，便于用户按照分组进行浏览，提高用户体验。

可选的，在上述实施例的基础上，S302中针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组之前，该方法还包括：对该至少一个分组进行排序。

S302中针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组，包括：针对排序后的该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息，对该分组进行渲染。

在上述S301中按照时间和地点对框架数据进行分组后，还可以先按照时间对分组进行排序，之后再对排序后的每个分组进行渲染，这样获得的列表结构即为按照时间-地点依次排布的列表结构。

在上述对框架数据进行分组进而生成按照分组排布的列表结构的基础上，可选的，S103中根据该列表结构，获取与该目标位置对应的待显示图片的详细信息之前，该方法还包括：记录每个分组在该列表结构中的位置。

相应的，S103中根据该列表结构，获取与该目标位置对应的待显示图片的详细信息，包括：根据每个分组在该列表结构中的位置，确定该目标位置对应的待显示分组；获取待显示分组中的待显示图片的详细信息。

示例地，用户浏览图片列表时，滑动屏幕至列表某一位置，该位置对应的待显示分组为列表结构中第10个分组，该分组的时间为2018年10月，地点为背景，该分组中包括10张图片，则终端设备进一步获取该分组中的这10张图片的详细信息来进行图片显示，具体的，终端设备可以根据该10张图片的标识向服务端发送第二请求以向服务端请求该10张图片的详细信息。通过该方法，用户浏览图片列表时，根据用户的浏览位置可以直接显示整个分组中的图片，方便用户进行浏览。此外，终端设备从服务端获取到的图片的详细信息还可以缓存到终端设备本地，当用户下次滑动到同样的位置时，就无需再次向服务端请求数据，而是可以直接加载出来，加快了图片列表的显示速度，也节省了用户的网络数据使用消耗。

在此基础上，为了进一步方便用户浏览，可以对用户即将浏览的图片进行预加载，可选的，上述根据每个分组在该列表结构中的位置，确定该目标位置对应的待显示分组，包括：根据该用户的操作指令确定操作的滑动方向；若该滑动方向为向上，则将该目标位置对应的目标分组和该目标位置之前的第一数量的分组确定为待显示分组；若该滑动方向为向下，则将该目标位置对应的目标分组和该目标位置之后的第二数量的分组确定为待显示分组。

用户操作终端设备进行浏览时，通过设置一个标识符来记录当前屏幕最上方显示的第一个分组，具体可以通过该分组的索引号进行记录，当用户滑动屏幕时，监听用户的滑动行为，当用户滑动的速度在一个预设的速度值范围以内时，比较用户滑动屏幕之后的屏幕内显示的第一个分组与之前记录的分组，并将标识符更新成滑动屏幕之后的屏幕内显示的第一个分组的索引号，通过比较滑动屏幕之后屏幕上显示的分组的索引号，就能判断出用户的滑动操作是向上滑动，还是向下滑动。

当用户的滑动操作是向上滑动时，用户除了想要浏览滑动屏幕后对应位置的图片外，还有可能继续向上浏览，因此将用户滑动屏幕后的目标位置所对应的目标分组，以及该目标位置之前的第一数量的分组都确定为待显示分组，第一数量可以根据实际需要进行设置，例如可以设为三个。当用户的滑动操作是向下滑动时，用户除了想要浏览滑动屏幕后对应位置的图片外，还有可能继续向下浏览，因此，将用户滑动屏幕后的目标位置所对应的目标分组，以及该目标位置之后的第二数量的分组都确定为待显示分组。这样，如果用户以一个正常的浏览列表的速度滑动列表时，可以自动加载出用户接下来需要看到的图片内容，有效避免滑动之后图片详细信息加载的等待时间。

在上述实施例的基础上，该方法还包括：根据每个分组的属性生成目录；该目录中的每个目录项与每个分组一一对应。具体的，在对框架数据分组排序完成后，再次遍历所有分组并生成一系列的目录项，每个目录项对应的元素就是这个分组中的图片的属性，例如上述每个分组的时间与地点。可以理解的是，本实施例中目录项并不仅限于根据时间和地点这样的二维结构，根据实际需要可以生产一维结构或三维结构等，本实施例对目录项的维度不作具体限制。例如还可以根据图片类型、图片参与人员等生成目录。

相应的，S102中基于用户的操作指令，确定目标位置，包括：接收用户输入的操作指令，该操作指令中包括该用户选择的目标目录项；确定该目标目录项对应的分组的目标位置。

用户可以通过点击屏幕选择目录中的目录项，该目录项对应列表结构中的一个分组，根据该分组即可确定用户选择的目标位置。示例地，图4为本发明提供的一种图片列表的显示示意图二。如图4所示，图片列表的目录中包括多个目录项，用户点击屏幕选择目录项“2019年5月北京”，则终端设备可根据该目录项确定对应的分组在图片列表中的位置，进而快速滚动屏幕至该位置，假设该位置对应的分组包括图片350-图片380，则屏幕滚动至列表结构中图片350框架的位置，由于受到终端设备屏幕大小限制，如图屏幕上显示图片350框架-图片355框架，然后在终端设备获得图片350-图片380的详细信息后即可显示图片350-图片380，同样由于受到终端设备屏幕大小限制，屏幕上显示图片350-图片355，用户滑动屏幕后继续显示图片355之后的图片，例如显示图片356-图片362。这样，通过点击目录，可以快速定位并让列表滚动到相应的目标位置，提高了用户浏览图片列表的效率，提高了用户体验。

图5为本发明的提供一种图片列表的显示装置的结构示意图。如图5所示，图片列表的显示装置50包括：

渲染模块501，用于根据获取的图片列表的框架数据，渲染图片列表的列表结构；该列表结构中包括图片列表中每个图片的标识和位置之间的对应关系，该框架数据中包括每个图片的标识和宽高信息；

确定模块502，用于基于用户的操作指令，确定目标位置；

获取模块503，用于根据该列表结构，获取与该目标位置对应的待显示图片的详细信息；

显示模块504，用于根据该详细信息显示待显示图片。

可选的，该渲染模块501用于：

向服务端发送第一请求，该第一请求用于请求该框架数据；

接收该服务端发送的该框架数据；

根据该框架数据，渲染图片列表的列表结构。

可选的，该获取模块503用于：

根据该列表结构，确定与该目标位置对应的待显示图片的标识；

向服务端发送第二请求，该第二请求中携带有待显示图片的标识，该第二请求用于请求待显示图片的详细信息；

接收该服务端发送的待显示图片的详细信息。

可选的，该渲染模块501还具体用于：

接收该服务端发送的第一框架数据；

向该服务端发送至少一个第三请求，至少一个第三请求用于请求第二框架数据，该第二框架数据为图片列表的框架数据中除该第一框架数据以外的其他框架数据；

接收该服务端发送的每个第三请求各自对应的第二框架数据。

可选的，该渲染模块501还具体用于：

通过主线程接收该服务端发送的第一框架数据。

可选的，该渲染模块501还具体用于：

通过子线程接收该服务端发送的每个第三请求各自对应的该第二框架数据。

可选的，该渲染模块501用于：

根据该第一框架数据中每个图片的标识和宽高信息渲染第一列表结构；

根据该第二框架数据中每个图片的标识和宽高信息渲染第二列表结构；

将该第二列表结构添加在该第一列表结构中，获得图片列表的列表结构。

可选的，该框架数据中还包括图片列表中每个图片对应的时间和地点；该渲染模块501用于：

根据预设规则对该框架数据进行分组，获得至少一个分组；其中，该至少一个分组中每个分组内的图片具有相同的属性；

针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组，获得图片列表的列表结构。

可选的，该渲染模块501还用于在针对该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息渲染该分组之前，

对该至少一个分组进行排序；

相应的，该渲染模块501还用于：

针对排序后的该至少一个分组中的每个分组，根据该分组中的图片的标识和宽高信息，对该分组进行渲染。

可选的，该渲染模块501还用于在该获取模块503根据该列表结构，获取与该目标位置对应的待显示图片的详细信息之前，记录每个分组在该列表结构中的位置；

该获取模块503用于：

根据每个分组在该列表结构中的位置，确定该目标位置对应的待显示分组；

获取待显示分组中的待显示图片的详细信息。

可选的，该获取模块503还用于：

根据该用户的操作指令确定操作的滑动方向；

若该滑动方向为向上，则将该目标位置对应的目标分组和该目标位置之前的第一数量的分组确定为待显示分组；

若该滑动方向为向下，则将该目标位置对应的目标分组和该目标位置之后的第二数量的分组确定为待显示分组。

可选的，该渲染模块501还用于，在记录每个分组在该列表结构中的位置之后，根据每个分组的属性生成目录；该目录中的每个目录项与每个分组一一对应；确定模块502用于：

接收用户输入的操作指令，该操作指令中包括该用户选择的目标目录项；

确定该目标目录项对应的分组的目标位置。

本实施例的装置，可以用于执行上述任一方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。

图6为本发明提供的一种终端设备的结构示意图。如图6所示，终端设备60包括存储器601和处理器602；存储器601和处理器602连接。

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

处理器602，用于在计算机程序被执行时，实现上述任一方法实施例的图片列表的显示方法。

本发明提供一种存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现如上述任一方法实施例的图片列表的显示方法。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (15)

1.一种图片列表的显示方法，其特征在于，包括：

根据获取的图片列表的框架数据，渲染所述图片列表的列表结构；所述列表结构中包括所述图片列表中每个图片的标识和位置之间的对应关系，所述框架数据中包括每个图片的标识和宽高信息；

基于用户的操作指令，确定目标位置；

根据所述列表结构，获取与所述目标位置对应的待显示图片的详细信息；

根据所述详细信息显示所述待显示图片。

2.根据权利要求1所述的方法，其特征在于，所述根据获取的图片列表的框架数据，渲染所述图片列表的列表结构，包括：

向服务端发送第一请求，所述第一请求用于请求所述框架数据；

接收所述服务端发送的所述框架数据；

根据所述框架数据，渲染所述图片列表的列表结构。

3.根据权利要求1或2所述的方法，其特征在于，所述根据所述列表结构，获取与所述目标位置对应的待显示图片的详细信息，包括：

根据所述列表结构，确定与所述目标位置对应的待显示图片的标识；

向服务端发送第二请求，所述第二请求中携带有所述待显示图片的标识，所述第二请求用于请求所述待显示图片的详细信息；

接收所述服务端发送的所述待显示图片的详细信息。

4.根据权利要求2所述的方法，其特征在于，所述接收所述服务端发送的所述框架数据，包括：

接收所述服务端发送的第一框架数据；

向所述服务端发送至少一个第三请求，所述至少一个第三请求用于请求第二框架数据，所述第二框架数据为所述图片列表的框架数据中除所述第一框架数据以外的其他框架数据；

接收所述服务端发送的每个第三请求各自对应的第二框架数据。

5.根据权利要求4所述的方法，其特征在于，所述接收所述服务端发送的第一框架数据，包括：

通过主线程接收所述服务端发送的第一框架数据。

6.根据权利要求4或5所述的方法，其特征在于，所述接收所述服务端发送的每个第三请求各自对应的第二框架数据，包括：

通过子线程接收所述服务端发送的每个第三请求各自对应的所述第二框架数据。

7.根据权利要求4或5所述的方法，其特征在于，所述根据获取的图片列表的框架数据，渲染所述图片列表的列表结构，包括：

根据所述第一框架数据中每个图片的标识和宽高信息渲染第一列表结构；

根据所述第二框架数据中每个图片的标识和宽高信息渲染第二列表结构；

将所述第二列表结构添加在所述第一列表结构中，获得所述图片列表的列表结构。

8.根据权利要求1所述的方法，其特征在于，所述根据获取的图片列表的框架数据，渲染所述图片列表的列表结构，包括：

根据预设规则对所述框架数据进行分组，获得至少一个分组，所述至少一个分组中每个分组中的图片具有相同的属性；

针对所述至少一个分组中的每个分组，根据所述分组中的图片的标识和宽高信息渲染所述分组，获得所述图片列表的列表结构。

9.根据权利要求8所述的方法，其特征在于，所述针对所述至少一个分组中的每个分组，根据所述分组中的图片的标识和宽高信息渲染所述分组之前，所述方法还包括：

对所述至少一个分组进行排序；

所述针对所述至少一个分组中的每个分组，根据所述分组中的图片的标识和宽高信息渲染所述分组，包括：

针对排序后的所述至少一个分组中的每个分组，根据所述分组中的图片的标识和宽高信息，对所述分组进行渲染。

10.根据权利要求8或9所述的方法，其特征在于，所述根据所述列表结构，获取与所述目标位置对应的待显示图片的详细信息之前，所述方法还包括：

记录所述每个分组在所述列表结构中的位置；

所述根据所述列表结构，获取与所述目标位置对应的待显示图片的详细信息，包括：

根据所述每个分组在所述列表结构中的位置，确定所述目标位置对应的待显示分组；

获取所述待显示分组中的待显示图片的详细信息。

11.根据权利要求10所述的方法，其特征在于，所述根据所述每个分组在所述列表结构中的位置，确定所述目标位置对应的待显示分组，包括：

根据所述用户的操作指令确定操作的滑动方向；

若所述滑动方向为向上，则将所述目标位置对应的目标分组和所述目标位置之前的第一数量的分组确定为所述待显示分组；

若所述滑动方向为向下，则将所述目标位置对应的目标分组和所述目标位置之后的第二数量的分组确定为所述待显示分组。

12.根据权利要求10所述的方法，其特征在于，所述记录所述每个分组在所述列表结构中的位置之后，所述方法还包括：

根据所述每个分组的属性生成目录；所述目录中的每个目录项与所述每个分组一一对应；

所述基于用户的操作指令，确定目标位置，包括：

接收用户输入的操作指令，所述操作指令中包括所述用户选择的目标目录项；

确定所述目标目录项对应的分组的目标位置。

13.一种图片列表的显示装置，其特征在于，包括：

渲染模块，用于根据获取的图片列表的框架数据，渲染所述图片列表的列表结构；所述列表结构中包括所述图片列表中每个图片的标识和位置之间的对应关系，所述框架数据中包括每个图片的标识和宽高信息；

确定模块，用于基于用户的第一操作指令，确定目标位置；

获取模块，用于根据所述列表结构，获取与所述目标位置对应的待显示图片的详细信息；

显示模块，用于根据所述详细信息显示所述待显示图片。

14.一种终端设备，其特征在于，包括存储器和处理器；所述存储器和所述处理器连接；

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

所述处理器，用于在计算机程序被执行时，实现如上述权利要求1-12中任一项所述的图片列表的显示方法。

15.一种存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时，实现如上述权利要求1-12中任一项所述的图片列表的显示方法。