网络图片显示方法、装置、设备、介质及产品与流程

1.本技术涉及数据处理技术领域，特别是涉及一种网络图片显示方法、装置、设备、介质及产品。


背景技术：

2.随着互联网的普及，网络已经逐渐成为生活中不可缺少的一部分，而浏览网页是用户使用网络的一种重要方式，通过浏览网页，用户可以获取各种资讯和资源。当用户需要浏览网页时，可以通过终端从服务器中获取网页资源，并基于该网页资源显示网页。
3.一个网页通常都会包括图片、视频等种类的网页资源。然而现有的网页一般是按照预先设定的分类规则对网络图片进行排列的，用户查看网络图片时，在网络图片的预览界面上网络图片是按照预先设定的分类规则进行逐一显示的，用户无法根据自己的需求更改这些网络图片的排列顺序，网络图片显示的灵活性较差。


技术实现要素：

4.本技术提供的一种网络图片显示方法、装置、设备、介质及产品，能够更改网络图片的显示顺序，提高网络图片显示的灵活性。
5.第一方面，本技术实施例提供一种网络图片显示方法，方法包括：
6.获取多个网络图片的图片信息，图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列；
7.接收用户输入的拖拽操作，拖拽操作用于拖拽多个网络图片中的第一图片；
8.响应于拖拽操作，获得第一图片的实时拖拽轨迹；
9.在实时拖拽轨迹位于第一图片对应的目标种类的显示区域内的情况下，将第一图片拖拽至目标位置，并对目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序；
10.对目标种类的显示区域内的每个网络图片，按照目标排序顺序在目标种类的显示区域内显示。
11.第二方面，本技术提供一种网络图片显示装置，该装置包括：
12.获取模块，用于获取多个网络图片的图片信息，图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列；
13.接收模块，用于接收用户输入的拖拽操作，拖拽操作用于拖拽多个网络图片中的第一图片；
14.响应模块，用于响应于拖拽操作，获得第一图片的实时拖拽轨迹；
15.排序模块，用于在实时拖拽轨迹位于第一图片对应的目标种类的显示区域内的情况下，将第一图片拖拽至目标位置，并对目标种类的显示区域内的每个网络图片进行重新
排序得到目标排序顺序；
16.显示模块，用于对目标种类的显示区域内的每个网络图片，按照目标排序顺序在目标种类的显示区域内显示。
17.第三方面，本技术实施例提供了一种电子设备，该电子设备包括：处理器以及存储有计算机程序指令的存储器；
18.处理器执行计算机程序指令时实现如第一方面中任意一个实施例中的网络图片显示方法。
19.第四方面，本技术实施例提供了一种计算机存储介质，计算机存储介质上存储有计算机程序指令，计算机程序指令被处理器执行时实现如第一方面中任意一个实施例中的网络图片显示方法。
20.第五方面，本技术实施例提供了一种计算机程序产品，计算机程序产品中的指令由电子设备的处理器执行时，使得电子设备执行实现如上述第一方面中任意一个实施例中的网络图片显示方法。
21.在本技术实施例提供的一种网络图片显示方法、装置、设备、介质及产品中，通过获取多个网络图片的图片信息，图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列；接收用户输入的拖拽操作，拖拽操作用于拖拽多个网络图片中的第一图片；响应于拖拽操作，获得第一图片的实时拖拽轨迹；在实时拖拽轨迹位于第一图片对应的目标种类的显示区域内的情况下，将第一图片拖拽至目标位置，并对目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序；对目标种类的显示区域内的每个网络图片，按照目标排序顺序在目标种类的显示区域内显示。通过上述方式，能够在网页页面显示网络图片时，根据用户不同的拖拽操作，对多个网络图片进行重新排序得到目标排序顺序，随后按照目标排序顺序在相应的显示区域内进行显示，从而能够根据用户喜好更改网络图片的显示顺序，提高网络图片显示的灵活性。
附图说明
22.为了更清楚地说明本技术实施例的技术方案，下面将对本技术实施例中所需要使用的附图作简单的介绍，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
23.图1是本技术一个实施例提供的网络图片显示方法的流程示意图；
24.图2是本技术一个实施例提供的一种网络图片显示系统的结构示意图；
25.图3是本技术一个实施例提供的一种绑定事件的原理示意图；
26.图4是本技术一个实施例提供的一种中断模块的原理示意图；
27.图5是本技术实施例提供的一种网络图片显示装置的结构示意图；
28.图6是本技术实施例提供的电子设备的结构示意图。
具体实施方式
29.为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可
以相互组合。
30.在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。
31.需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
32.需要说明的是，本技术技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。
33.为了解决现有技术问题，本技术实施例提供了一种网络图片显示方法、装置、设备、介质及产品。下面首先对本技术实施例所提供的网络图片显示方法进行介绍。
34.图1示出了本技术一个实施例提供的网络图片显示方法的流程示意图。如图1所示，该方法具体可以包括如下步骤：
35.s100，获取多个网络图片的图片信息，图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列。
36.可选地，在本技术实施例中，网络图片存储在服务器端，其中，服务器端包括所有网络图片的图片列表，图片列表中的每个网络图片包含必要属性(即图片信息)：图片种类，图片序号，资源唯一标识等图片信息。图片种类提供网络图片分类展示作用。图片序号提供网络图片展示的先后顺序，不同图片种类的图片排序顺序没有关联。唯一标识定位图片资源，用于下载图片。
37.可选地，在本技术实施例中，可以遍历网络图片列表，逐个获取每张网络图片的图片种类和图片序号。将每张网络图片的图片种类和图片序号保存在相应的数据结构中，例如一个包含对象的数组，每个对象表示一张网络图片并包含图片种类和图片序号。
38.可选地，在本技术一种可能的实现方式中，可以使用一个包含网络图片的数组。根据网络图片的图片种类创建对应的显示区域，并将该显示区域与图片种类关联起来。根据图片种类和图片序号，将网络图片放置到对应的显示区域中，并按照图片序号的大小进行排序。示例性的，假设有以下三张网络图片：图片a:种类-动物，序号-3；图片b:种类-自然景观，序号-2；图片c:种类-动物，序号-1，随后创建显示区域：动物类别的显示区域和自然景观类别的显示区域；将图片a放置到动物类别的显示区域中，按照序号排序。将图片b放置到自然景观类别的显示区域中，按照序号排序。将图片c放置到动物类别的显示区域中，按照序号排序。得到结果：动物类别的显示区域中的图片顺序：图片c(序号1)、图片a(序号3)。自然景观类别的显示区域中的图片顺序：图片b(序号2)。容易理解的是，依次排序的方式可以从左往右按照图片序号大小依次排序，也可以是从上往下，本技术并不限制具体的排序方式，只要能够按照图片序号的大小依次排列即可。
39.s200，接收用户输入的拖拽操作，拖拽操作用于拖拽多个网络图片中的第一图片。
40.可选地，在本技术实施例中，可以通过监听拖拽事件接收用户输入的拖拽操作，例如使用超文本标记语言第五版(hypertext markup language version 5，html5)的drag事件，在拖拽开始时获取被拖拽的网络图片的图片信息，其中，drag是html5定义的一种原生事件，即抓取对象后拖到另一个位置。监听用户的拖拽操作，获取拖拽的源元素。例如，用户点击并拖动了网络图片b，则该网络图片b被认为是拖拽的源元素。
41.在本技术一种可能的实现方式中，可以使用层叠样式表类名(cascading style sheets class name，css)或其他方式标识要拖拽的第一图片来接收用户输入的拖拽操作。在拖拽开始时，获取被拖拽的元素(即第一图片)的相关信息，如图片的资源唯一标识、图片种类和图片序号。将这些信息存储在适当的数据结构中，例如一个对象。将该对象作为拖拽操作的数据传递，以便在后续步骤中使用。
42.s300，响应于拖拽操作，获得第一图片的实时拖拽轨迹。
43.可选地，在本技术实施例中，可以通过监听拖拽事件，获取实时的鼠标位置信息，以此来获得第一图片的实时拖拽轨迹。例如，当用户拖动图片b时，随着鼠标移动，不断获取当前鼠标的坐标，生成图片b的实时拖拽轨迹。具体而言，可以监听页面上的拖拽事件，例如使用html5的drag事件。获取拖拽事件中的相关信息，特别是与第一图片相关的信息，包括拖拽开始位置、当前位置以及移动的距离等。根据拖拽事件得到第一图片的起始位置和移动距离，计算第一图片在拖拽过程中的实时位置。根据计算得到的位置信息，更新第一图片的显示位置或样式，使其随拖拽动作实时移动，从而得到第一图片的实时拖拽轨迹。亦或者是，在拖拽过程中，通过保存每个时间点第一图片的位置信息，从而得到第一图片完整的拖拽轨迹。
44.s400，在实时拖拽轨迹位于第一图片对应的目标种类的显示区域内的情况下，将第一图片拖拽至目标位置，并对目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序。
45.可选地，在本技术实施例中，判断第一图片的拖拽轨迹是否位于第一图片对应的目标种类的显示区域内。如果位于该显示区域内，则将第一图片拖拽至目标位置。对目标种类的显示区域内的每个网络图片进行重新排序，根据需要的逻辑和拖拽轨迹的位置，调整该显示区内图片的图片序号。例如，用户拖动的是图片a，它属于动物类别，并且拖动轨迹位于动物类别的显示区域内。用户将图片a拖拽至新位置后，其他动物类别的图片也会重新排序。
46.可选地，在本技术一种可能的实现方式中，可以通过监听拖拽事件，确保是针对第一图片的拖拽操作。随后判断拖拽轨迹是否位于目标种类的显示区域内。如果拖拽轨迹在目标种类的显示区域内，将第一图片随拖拽操作实时移动至目标位置。对目标种类的显示区域内的每张网络图片进行重新排序，以获取该显示区域内所有网络图片的排序顺序。可以根据图片的位置或其他属性进行重新排序的操作。具体而言，可以通过修改图片的属性或更新对应的数据结构来得到更新后的目标排序顺序。
47.s500，对目标种类的显示区域内的每个网络图片，按照目标排序顺序在目标种类的显示区域内显示。
48.可选地，在本技术实施例中，根据目标排序顺序，确定每张图片的位置，并将其放
置在对应的位置上。示例：假设目标种类的显示区域内有多张网络图片，已经根据目标排序顺序进行了重新排序，现在需要按照目标排序顺序将这些图片在目标种类的显示区域内展示出来，以确保它们按照序号大小排列。具体而言，可以根据目标种类的新排序顺序(即目标排序顺序)，调整该类别显示区域内每个网络图片的位置和顺序。例如，经过拖拽操作后，动物类别的图片重新排序，根据新的顺序重新排列该动物类别的显示区域内的每张图片。
49.可选地，在本技术一种可能的实现方式中，可以首先获取目标种类的显示区域，例如一个包含这些图片的容器元素。根据目标排序顺序，对目标种类的显示区域内的每张网络图片进行重新排列，确保它们按照目标排序顺序进行排列。可以通过设置图片的位置属性或使用布局方式来确定每张图片在该显示区域内的特定位置。
50.在本技术实施例提供的一种网络图片显示方法中，通过获取多个网络图片的图片信息，图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列；接收用户输入的拖拽操作，拖拽操作用于拖拽多个网络图片中的第一图片；响应于拖拽操作，获得第一图片的实时拖拽轨迹；在实时拖拽轨迹位于第一图片对应的目标种类的显示区域内的情况下，将第一图片拖拽至目标位置，并对目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序；对目标种类的显示区域内的每个网络图片，按照目标排序顺序在目标种类的显示区域内显示。通过上述方式，能够在网页页面显示网络图片时，根据用户不同的拖拽操作，对多个网络图片进行重新排序得到目标排序顺序，随后按照目标排序顺序在相应的显示区域内进行显示，从而能够根据用户喜好更改网络图片的显示顺序，提高网络图片显示的灵活性。
51.在一实施例中，在上述步骤200之前，该方法还可以具体执行如下步骤：
52.s210，获取多个网络图片中属于目标种类的目标图片组。
53.可选地，在本技术实施例中，可以遍历服务器端的多个网络图片列表。对于每个网络图片，检查其图片种类是否与目标种类相同。如果图片种类与目标种类相同，将该图片添加到目标图片组中。例如，假设有一个多个网络图片的列表，其中包含以下几个图片：图片1：种类a；图片2：种类b；图片3：种类a；图片4：种类a；如果要获取属于目标种类的目标图片组，根据上述步骤，遍历整个列表，发现图片1和图片3属于目标种类，那么目标图片组将包含图片1和图片3。
54.可选地，在本技术一种可能的实现方式中，可以通过xmlhttprequest技术从服务器端获取到图片列表，然后按照图片种类将图片分类成各个子对象。子对象的属性1表示图片种类，属性2表示各个子数组，每个子数组中又以图片序号进行排序。其中，xmlhttprequest是一组应用程序编程接口(application programming interface，api)函数集，可被javascript及其他万维网(world wide web，web)浏览器脚本语言调用，通过超文本传输协议(hypertext transfer protocol，http)在浏览器和服务器之间收发可扩展标记语言(extensible markup language，xml)或javascript对象表示法(javascript object notation，json)等数据。
55.在这些可选地实施例中，将同一种类的图片归为一组，方便进行分类展示，提供更好的用户体验。根据目标种类的图片组，可以进行相关的界面优化，例如样式调整、布局设计等，以增强图片展示的效果和美观度。
56.s220，根据目标图片组中每个网络图片的图片信息，确定目标图片组的初始排序顺序。
57.可选地，在本技术实施例中，可以获取目标图片组中每个网络图片的图片序号信息。根据图片序号对目标图片组进行排序，确保按照图片序号的大小依次排列。例如，假设目标图片组包含以下两个图片：图片1：序号2；图片2：序号1；随后根据图片序号对目标图片组进行排序，将图片2放在第一位，图片1放在第二位。从而确定目标图片组的初始排序顺序。
58.在这些可选地实施例中，确保目标图片组中的图片按照预期的顺序排列，使展示效果更加符合预期。将目标图片组中的图片按照一定的规则排序，使其在展示区域内保持统一的布局，提供更好的视觉效果和用户体验。
59.在一实施例中，在上述步骤500之后，该方法还可以具体执行如下步骤：
60.s600，将初始排序顺序更新为目标排序顺序。
61.可选地，在本技术实施例中，会在显示页面(即展示区域)先更新并显示拖拽后重新排序后的目标图片组，随后再在服务器端更新目标图片组的初始排序顺序，将初始排序顺序更新为目标排序顺序，从而能更快的提供响应速度。服务器端更新后也不用返回新的图片数组信息，只需返回成功即可。
62.在这些可选地实施例中，通过将初始排序顺序更新为目标排序顺序，可以实现对图片在显示区域内的展示顺序进行自定义。这样用户可以按照自己的喜好或需求，调整图片的展示顺序，从而提供更好的用户体验。如果图片被分为不同的种类或分类，而每个种类在显示区域内有对应的展示区域，通过更新排序顺序可以将同一种类的图片按照指定的顺序排列在对应的展示区域中。这样可以实现图片按种类分类展示，并保持每个种类内部的顺序一致，提供更好的分类展示效果。如果用户进行了拖拽操作或其他交互操作导致图片顺序发生变化，通过将初始排序顺序更新为目标排序顺序，可以实现动态的排序更新。这样可以确保在用户进行交互操作后，图片的展示顺序能够及时更新，保持与用户操作的一致性。
63.在一实施例中，在上述步骤200之前，该方法还可以具体执行如下步骤：
64.s230，对每个网络图片绑定拖拽事件，拖拽事件用于触发多个网络图片根据拖拽操作进行重新排序。
65.可选地，在本技术一种可能的实现方式中，可以首先通过合适的选择器或文档对象模型操作(document object model manipulation，dom操作)，获取到需要绑定拖拽事件的多个网络图片的元素，可以是一组具有相同类名或其他共同特征的元素。dom操作是指通过编程方式对html或xml文档的结构和内容进行访问、修改和操作的过程。它是一种用于与网页文档进行交互的编程接口，通过操作dom可以实现对网页元素的增加、删除、修改和查询等操作。
66.随后为每个网络图片元素添加拖拽事件的监听器，将"dragstart"和"dragover"事件绑定到每个网络图片元素上。其中，"dragstart"事件的功能为在拖拽操作开始时触发；并用于设置拖动操作的起始点，即标记被拖动的元素。通常在该事件处理程序中设置拖动操作所传递的数据以及设置拖动的样式。"dragover"事件的功能为在拖拽元素在可放置区域内移动时触发，并用于控制拖拽元素在目标区域内的行为。通常在该事件处理程序中
取消默认的拖拽行为，允许将元素放置到指定区域。具体而言，"dragstart"事件在拖拽开始时设置拖动的起点和相关数据，而"dragover"事件则在拖拽元素在目标区域内移动时控制拖拽的行为，例如显示拖拽的效果、允许或禁止放置等。通过使用这两个事件，可以实现自定义的拖拽行为，并对拖拽元素和目标区域进行相应的操作和交互。
67.在将"dragstart"和"dragover"事件绑定到每个网络图片元素上后，需要编写拖拽事件的处理函数，根据拖拽操作进行重新排序的逻辑。这个处理函数可以是一个单独的函数，也可以直接在事件监听器中定义。处理函数应该根据拖拽操作的目标位置和其他相关信息，重新排序多个网络图片的顺序。在拖拽事件的处理函数中，根据拖拽操作的目标位置和其他相关信息，对多个网络图片的顺序进行重新排序。可以通过操作dom元素的位置属性或修改图片元素的样式来改变它们的显示顺序。通过上述步骤，每个网络图片都会被绑定拖拽事件，并在拖拽操作时触发重新排序的逻辑，从而实现根据拖拽操作对多个网络图片进行重新排序的效果。这样用户可以通过拖拽图片来改变它们的位置，并根据需要重新排列图片的顺序。
68.在本技术另一种可行的实施方式中，利用html5原生的drag和drop事件，遍历资源整合得到的图片数组，为每个图片dom绑定拖拽事件。拖拽事件包括：dragstart事件、dragover事件、dragenter事件、dragend事件。
69.dragstart事件，保存当前拖动元素。dragover事件取消默认动作，把分隔元素(division element，div)变成可放置的元素，即重写dragenter/dragover事件。div是html中的一个元素，用于表示一个无具体语义的块级容器。《div》元素用于包裹其他html元素，通过设置样式和布局属性，可以对包含的内容进行分组和定位。
70.dragend事件，用于绑定拖拽完成后的数据处理函数，dragend事件的功能为在拖拽操作结束时触发；用于清理和处理拖拽操作的相关数据；通常在该事件处理程序中进行一些拖拽结束后的操作，例如清除拖拽样式、更新数据等。"dragenter"事件的功能为在拖拽元素进入可放置区域时触发。用于标记目标区域，表示该区域可以接收拖拽元素；通常在该事件处理程序中设置放置目标的样式或进行其他标记。
71."dragenter"事件在拖拽元素进入目标区域时触发，用于标记该区域为有效的放置目标，可以在该事件中修改目标区域的样式以提供视觉反馈。"dragend"事件在拖拽操作结束时触发，用于进行一些清理操作或处理最终的拖拽结果，例如恢复初始状态、更新相关数据等。dragend事件和dragenter事件的组合可以实现更精细的拖拽行为控制，通过监听"dragenter"事件可以动态改变目标区域的外观和行为，而"dragend"事件则提供了结束拖拽操作后的处理机会。
72.在这些可选地实施例中，对每个网络图片绑定拖拽事件并进行重新排序，可以提供更灵活、交互性强的图片展示方式，增强用户体验，使用户能够自主控制图片的位置和顺序，获得更加个性化的展示效果。
73.通过为每个网络图片添加拖拽事件，提供了一种直观的、可操作的方式让用户自由调整图片的位置和顺序，增强了用户对图片的交互性和参与感。用户可以按照自己的喜好或需求，通过拖拽操作灵活地对多个网络图片进行排序，实现个性化的图片展示效果，提升用户体验。随着拖拽操作的进行，通过重新排序多个网络图片的位置，可以实现动态布局，使得页面中的图片显示更加灵活、多样化，适应不同尺寸、屏幕或容器的要求。通过拖拽
事件触发的重新排序，可以实时反映用户对图片位置和顺序的改变，让用户立即看到结果，提供即时的反馈和视觉效果。通过拖拽事件进行重新排序，用户可以根据自己的喜好将喜爱的图片放置在前面，或者按照某种规则对图片进行排序，从而创造出符合个人偏好和风格的独特图片展示。
74.在一实施例中，上述步骤300具体可以执行如下步骤：
75.s310，基于拖拽事件，实时获取第一图片的拖拽轨迹。
76.可选地，在本技术实施例中，可以在第一图片上绑定拖拽事件的监听器。并在拖拽事件的回调函数中，获取当前鼠标或触摸指针的位置信息，例如可以使用事件对象提供的属性(如clientx、clienty)来获取。随后将获取到的位置信息保存到一个数据结构中，例如数组、对象等，以便后续使用。并根据拖拽事件的频率，在每次事件触发时都更新位置信息，将其添加到拖拽轨迹数据结构中。得到第一图片的拖拽轨迹。拖拽轨迹的信息可以用于后续的操作，如移动其他元素、显示拖拽效果等。拖拽轨迹可以用于在页面上展示拖拽的效果，例如绘制路径、显示阴影或边框等，使用户能够清楚地看到他们正在拖拽的元素。
77.示例性的说明，当用户拖拽第一图片时，鼠标的位置会不断变化，我们可以通过监听拖拽事件，获取鼠标位置的坐标，并将这些坐标保存在一个数组中。这样，我们就可以实时地获得拖拽轨迹，了解用户拖拽的路径和移动情况。
78.在这些可选地实施例中，通过获取拖拽轨迹，可以实时反馈用户的拖拽操作，让用户能够看到他们所拖拽的图片在页面上的位置变化，增强了交互的直观性和实时性。并通过展示拖拽轨迹，可以向用户提供可视化的反馈和引导，帮助他们更好地理解拖拽操作的效果和结果，提高用户体验和操作的准确性。基于拖拽事件实时获取拖拽轨迹的步骤有助于实现实时反馈、可视化效果、数据处理和用户引导等功能，提升了交互性和用户体验。
79.在一实施例中，上述步骤400具体可以执行如下步骤：
80.s410，基于拖拽轨迹，确定第一图片拖拽的起始区域和目标区域。
81.可选地，在本技术实施例中，可以通过监听拖拽事件获取拖拽操作的起始点和目标点的相关信息。具体而言，根据拖拽轨迹和页面布局，确定第一图片拖拽的起始区域和目标区域。其中，起始区域是拖拽操作开始时第一图片所在的区域，目标区域是拖拽操作结束时所指定的区域。
82.在这些可选地实施例中，确定起始区域和目标区域可以提供拖拽操作的上下文和参考点。这样可以明确拖拽的起始位置和拖拽的目标位置，为后续的操作提供准确的位置信息。
83.s420，在目标区域位于目标显示区域内的情况下，更改目标区域的显示样式以将目标区域设置为可放置区域。
84.可选地，在本技术实施例中，可以通过监听拖拽事件的相关事件，例如dragenter，可以判断目标区域是否在目标显示区域内。如果目标区域位于目标显示区域内，可以通过改变目标区域的显示样式，例如背景色或边框样式，来表示它是一个可放置区域。其中，改变目标区域的显示样式可以通过修改对应的css类或内联样式来实现。
85.在这些可选地实施例中，通过更改目标区域的显示样式，可以提供视觉上的反馈，指示该区域可以接受放置操作。这样可以提高用户体验，使用户清楚地知道哪些区域是可以放置图片的。
86.s430，基于拖拽事件，将第一图片放置在目标区域。
87.可选地，在本技术实施例中，可以通过监听拖拽事件的相关事件，例如drop，可以捕获到拖拽操作结束时的目标区域。在拖拽操作结束时，并可以通过修改dom结构、移动元素或交换位置等方式实现将第一图片放置到目标区域内。亦或者是更新元素的父节点或重新排列元素的顺序，以确保第一图片被正确放置在目标区域内。
88.在这些可选地实施例中，实现了将第一图片放置到目标区域的功能。这样可以实现图片的位置交换或移动，使用户可以自由调整图片在页面中的位置，提供更好的自定义性和交互性。
89.s440，在目标区域存在第二图片的情况下，将第二图片切换至起始区域，第二图片的图片种类和第一图片的图片种类相同。
90.可选地，在本技术实施例中，当目标区域内已经存在一张图片，且该图片的图片种类与第一图片相同时，需要进行切换操作。通过获取第二图片的相关信息，例如其dom元素或唯一标识符，可以将第二图片从目标区域移动到起始区域。具体而言，可以更新元素的父节点或重新排列元素的顺序，以确保第二图片被正确切换至起始区域。当目标区域已经存在同一种类的图片时，通过切换第二图片至起始区域，可以实现图片位置的交换，保持同种类图片在对应显示区域内按序排列的逻辑。这样可以保持图片的有序性和一致性，使布局更加整齐和易于管理。
91.在这些可选地实施例中，通过绑定拖拽事件，能够提高拖拽操作的准确性和可视化反馈，并实现图片位置调整和交换，保持图片的有序性和一致性，从而提升用户体验、增强页面交互性和布局美观性。
92.在一实施例中，上述步骤500可以具体执行如下步骤：
93.s510，按照目标排序顺序依次下载目标种类的显示区域内的每个网络图片。
94.可选地，在本技术实施例中，获取目标种类的显示区域内的所有网络图片。并根据目标排序顺序对网络图片进行排序，确保按照指定顺序进行下载。依次遍历排序后的网络图片列表。对于每个网络图片，发起下载请求，获取图片资源。随后将下载的图片资源保存到适当的位置，例如本地缓存或指定的目录。
95.在这些可选地实施例中，按照目标排序顺序依次下载目标种类的显示区域内的每个网络图片，确保图片按照指定顺序下载。通过按照排序顺序下载图片，可以使用户在观看图片时不会出现乱序或延迟加载的情况，提供更流畅的加载体验。
96.s520，在每个网络图片下载完成的情况下，按照目标排序顺序在目标显示区域显示网络图片。
97.可选地，在本技术实施例中，可以通过监听每个网络图片下载完成的事件或使用回调函数，在下载完成时触发相应的处理。对于每个下载完成的网络图片，根据其所对应的图片序号和目标排序顺序，确定其在目标显示区域中的位置。将下载完成的网络图片插入到目标显示区域的相应位置，使其按照指定的顺序显示。
98.在这些可选地实施例中，在每个网络图片下载完成后，按照目标排序顺序在目标显示区域中按序显示网络图片，保持图片的顺序和一致性。并通过按序显示图片，可以避免在加载过程中出现图片位置错乱或闪烁的情况，提供更稳定的界面呈现。改善用户的使用体验并增强用户对网页或应用的满意度。
99.在一实施例中，上述步骤510具体可以执行如下步骤：
100.s511，获取当前图片下载数量。
101.可选地，在本技术实施例中，可以使用一个变量来记录已下载的图片数量。每当成功下载一张图片时，该变量就会增加。例如可以创建一个名为downloadedcount的变量，并将其初始化为0。每当成功下载一张图片，你就将downloadedcount加1。通过查询该变量的值，你可以获取当前图片下载数量。
102.在这些可选地实施例中，通过获取当前下载数量，可以对下载操作进行管理和调度，例如展示下载进度条、计算剩余下载时间、暂停或取消下载等。这样能够提供更好的用户反馈和控制机制，使用户能够清楚地了解图片下载的情况，并进行相应的操作。
103.s512，在当前图片下载数量小于预设最大下载数量的情况下，按照目标排序顺序依次下载每个图片。
104.可选地，在本技术实施例中，通过实时获取所在网页页面正在下载的所有图片下载数量，并且只有在当前下载数量不超过预设最大下载数量的情况下，才开始下载重新排序后的网络图片。需要说明的是，本技术实施例在获取图片列表和绑定事件的这一系列过程中，图片并未真正下载，只有在用户拖拽操作以后才是真正下载图片的地方。下载方式采用闭包方式，可以自定义最大下载数，在网络状况差的时候不至于图片加载太慢。
105.在这些可选地实施例中，在当前图片下载数量小于预设的最大下载数量时，按照目标排序顺序依次下载每个图片能够确保下载操作的有序性和合理性。通过限制同时下载的图片数量，可以避免过多的并发请求对网络带宽和服务器负载造成压力，从而提高下载的效率和稳定性。此外，按照目标排序顺序依次下载图片可以保证图片按照预期的顺序加载和显示，使用户能够有序地浏览和查看图片内容。此外，按照目标排序顺序依次下载每个图片，并确保下载数量不超过预设的最大下载数量。这样可以控制下载过程中的图片数量，以避免超出限制或对性能造成不利影响。
106.在一实施例中，上述步骤512，可以具体执行如下步骤：
107.s5121，监控目标种类的显示区域所在的网页页面的统一资源定位系统url的哈希值。
108.可选地，在本技术实施例中，可以获取目标种类的显示区域所在的元素或容器。获取网页页面的当前url。计算当前url的哈希值。比较当前url的哈希值与之前记录的哈希值是否相等。如果哈希值相等，则说明页面未发生变化，继续执行其他操作。如果哈希值不相等，则说明页面发生变化，进行相应处理。
109.在这些可选地实施例中，实时监测网页页面url的哈希值变化，可以感知页面内容是否发生了变化。哈希值的变化通常代表着页面的更新或重载，因此可以作为判断页面状态的依据。通过监控哈希值的变化，可以及时做出相应的处理，例如停止或调整相关操作，避免不必要的资源浪费和错误行为。
110.s5122，在哈希值未发生变化的情况下，按照目标排序顺序依次下载每个图片。
111.可选地，在本技术实施例中，可以通过比较当前哈希值和实时哈希值，如果哈希值相等，则说明页面未发生变化，可以进行网络图片的下载。
112.s5123，在哈希值发生变化的情况下，停止下载网络图片。
113.可选地，在本技术实施例中，监测到哈希值发生变化，即网页页面发生了变化。停
止当前正在进行的图片下载操作。并终止未开始的图片下载操作，以及清空下载队列或相关数据结构。根据需求进行相应的处理，如更新页面内容、重新加载页面等。
114.可选地，在本技术实施例中，哈希值变化意味着页面发生了变化，此时停止下载网络图片可以避免下载无效或过期的图片，节省带宽和资源。停止下载可以提高下载的效率和速度，避免浪费时间和资源在即将被丢弃的内容上。停止下载网络图片可以保证页面显示的内容与当前页面状态相符，提供准确和可靠的信息。
115.在这些可选地实施例中，在保证页面哈希值不发生变化的情况下，按照目标排序顺序顺利下载每个网络图片。同时，当哈希值发生变化时，停止下载操作可以避免下载无效的或过期的图片，提高资源利用效率和用户体验。并可以确保页面状态的一致性、提供良好的用户体验、节省带宽和资源，并确保下载的内容与页面相符合。
116.对于某些需要首页展示批量图片资源的网站，如何分类展示，如何人为控制展示顺序，如何异步方式加快图片加载等问题在某些情况下是需要解决的。一般的网络图片资源加载只能满足少量的，不可控的，同步的显示方式。而在以批量图片资源需要分类展示，拖拽，异步加载的需求下不能很好的解决。本技术以非侵入式，更简单，方便地解决图片展示的种种痛点。
117.可选地，在本技术一种可能的实现方式中，还可以提供一种网络图片显示系统，如图2所示，该系统可以包括服务器端、资源整合模块、事件绑定模块、事件触发模块、数据更新模块、可控下载模块、中断模块。以下对各模块进行详细描述。
118.服务器端：图片整体资源保存在数据库中，每个图片包含必要属性:分类种类，排序顺序，资源唯一标识等信息。分类种类提供图片分类展示作用。排序顺序提供图片展示的先后顺序，不同分类的图片排序顺序没有关联。唯一标识定位图片资源，用于下载图片。在服务器交互时实现xmlhttprequest的开源库都可使用，例如axios，jquery javascript库(jquery-the write less,do more,javascript library，jquery)等，或者通过手动实现服务器的交互。
119.资源整合模块：通过xmlhttprequest技术从服务器端获取到图片列表，然后按照分类种类将图片分类成各个子对象。子对象的属性1表示种类名，属性2表示各个子数组，每个子数组中又以图片排序顺序进行排序。然后将子对象依次放入图片数组中，则得到的此图片数组即为整合后的图片数组。
120.事件绑定模块：如图3所示，利用html5原生的drag，drop事件，遍历资源整合得到的图片数组，为每个图片dom绑定拖拽事件。dragstart事件，保存当前拖动元素。dragover事件取消默认动作，把div变成可放置的元素，即重写dragenter/dragover。dragend事件，绑定拖拽完成后的数据处理函数。
121.事件触发模块：当用户拖拽对应图片触发对应事件。拖拽开始时保存当前拖动元素。拖拽进行时判定当前拖拽元素是否等于目标元素，两元素相等则返回。然后保存一份当前图片列表的副本，在此副本基础上重新排序拖动后的图片顺序。拖动结束后，判断拖动的元素与目标元素种类，同类则将副本图片列表当成新的图片列表并触发数据更新模块，否则结束操作。
122.数据更新模块：在副本图片列表替换旧的图片列表后触发，目的为了更新服务器的图片顺序。将图片拖动后的唯一标识按顺序排序，并提供图片种类信息。所以此方法会导
致显示先更新，服务器端后更新，能更快的提供响应速度。服务器端更新后也不用返回新的图片数组信息，只需返回成功即可。
123.可控下载模块：在获取图片列表和绑定事件的这一系列过程中，图片并未真正下载，通过循环图片列表绑定下载模块才是真正下载图片。并且下载方式采用闭包方式，可以自定义最大下载数，在网络状况差的时候不至于图片加载太慢。
124.中断模块：满足自动中断或手动中断图片下载的需求。例如如图4所示，资源文件(即需要下载的网络图片)放入预下载数组中，获取自定义的最大下载数，并将当前下载资源与canceltoken函数绑定，canceltoken函数用于触发取消当前下载的资源，当页面发生跳转，监听url的hash变化，取消当前正在下载资源，并且清空预下载数组，将已下载资源删除。canceltoken是基于promise的http客户端(promise based http client for the browser and node.js，axios)用来取消请求的api。axios是基于promise的网络请求库，作用于节点.js(nodejs)和浏览器中。在服务器端使用原生nodejs的http模块，在客户端则使用xmlhttprequest。
125.当页面发生跳转，监听url的hash变化，绑定触发函数canceltoken，事先将正在下载的模块加入一个下载数组中，遍历下载数组以取消下载，节约带宽，优化用户体验。亦或者在在实现终止下载操作时，可将状态管理交予全局控制，控制其正在下载的列表和终止动作。例如vuex，redux等状态管理工具。vue状态管理器(vuex-vue.js state management，vuex)，redux状态管理器为前端框架中的状态管理库，可存取全局数据，方便数据的使用和管理。
126.在这些可选地实施例中，将图片列表操作整合出一种简单方便使用，满足用户操作图片的集合。解决了前端在处理批量图片列表和操作上的问题。优化了图片加载和操作，提升了用户使用体验；不依赖于第三方库，基于绑定事件和api接口，体积小适用性高。
127.图5示出了本技术另一个实施例提供的网络图片显示装置的结构示意图，为了便于说明，仅示出了与本技术实施例相关的部分。
128.参照图5，网络图片显示装置可以包括：
129.获取模块501，用于获取多个网络图片的图片信息，图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列；
130.接收模块502，用于接收用户输入的拖拽操作，拖拽操作用于拖拽多个网络图片中的第一图片；
131.响应模块503，用于响应于拖拽操作，获得第一图片的实时拖拽轨迹；
132.排序模块504，用于在实时拖拽轨迹位于第一图片对应的目标种类的显示区域内的情况下，将第一图片拖拽至目标位置，并对目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序；
133.显示模块505，用于对目标种类的显示区域内的每个网络图片，按照目标排序顺序在目标种类的显示区域内显示。
134.在一实施例中，网络图片显示装置还可以包括：
135.第二获取模块，用于获取多个网络图片中属于目标种类的目标图片组；
136.第一确定模块，用于根据目标图片组中每个网络图片的图片信息，确定目标图片
组的初始排序顺序。
137.在一实施例中，网络图片显示装置还可以包括：
138.更新模块，用于将初始排序顺序更新为目标排序顺序
139.在一实施例中，网络图片显示装置还可以包括：
140.绑定模块，用于对每个网络图片绑定拖拽事件，拖拽事件用于触发多个网络图片根据拖拽操作进行重新排序。
141.在一实施例中，响应模块503可以包括：
142.获取子模块，用于基于拖拽事件，实时获取第一图片的拖拽轨迹。
143.在一实施例中，排序模块504可以包括：
144.确定子模块，用于基于拖拽轨迹，确定第一图片拖拽的起始区域和目标区域；
145.更改子模块，用于在目标区域位于目标显示区域内的情况下，更改目标区域的显示样式以将目标区域设置为可放置区域；
146.放置子模块，用于基于拖拽事件，将第一图片放置在目标区域；
147.切换子模块，用于在目标区域存在第二图片的情况下，将第二图片切换至起始区域，第二图片的图片种类和第一图片的图片种类相同。
148.在一实施例中，拖拽事件包括以下至少一种：
149.起始事件，起始事件用于在拖拽操作开始时记录拖拽的第一图片的初始图片信息；
150.切换事件，切换事件用于在第一图片拖拽至预设区域的情况下，更改预设区域的显示样式，以及第一图片的显示样式；
151.结束事件，结束事件用于在拖拽操作结束的情况下，对第一图片对应的目标显示区域的每个网络图片进行重新排序。
152.在一实施例中，显示模块505可以包括：
153.下载子模块，用于按照目标排序顺序依次下载目标种类的显示区域内的每个网络图片；
154.显示子模块，用于在每个网络图片下载完成的情况下，按照目标排序顺序在目标显示区域显示网络图片。
155.在一实施例中，第一下载子模块可以包括：
156.获取单元，用于获取当前图片下载数量；
157.下载单元，用于在当前图片下载数量小于预设最大下载数量的情况下，按照目标排序顺序依次下载每个图片。
158.在一实施例中，下载单元可以包括：
159.监控子单元，用于监控目标种类的显示区域所在的网页页面的统一资源定位系统url的哈希值；
160.下载子单元，用于在哈希值未发生变化的情况下，按照目标排序顺序依次下载每个图片；
161.终止单元，用于在哈希值发生变化的情况下，停止下载网络图片
162.需要说明的是，上述装置/单元之间的信息交互、执行过程等内容，与本技术方法实施例基于同一构思，是与上述电池热失控预警方法对应的装置，上述方法实施例中所有
实现方式均适用于该装置的实施例中，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。
163.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本技术的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
164.图6示出了本技术实施例提供的电子设备的硬件结构示意图。
165.设备可以包括处理器601以及存储有程序指令的存储器602。
166.处理器601执行程序时实现上述任意各个方法实施例中的步骤。
167.示例性的，程序可以被分割成一个或多个模块/单元，一个或者多个模块/单元被存储在存储器602中，并由处理器601执行，以完成本技术。一个或多个模块/单元可以是能够完成特定功能的一系列程序指令段，该指令段用于描述程序在设备中的执行过程。
168.具体地，上述处理器601可以包括中央处理器(cpu)，或者特定集成电路(application specific integrated circuit，asic)，或者可以被配置成实施本技术实施例的一个或多个集成电路。
169.存储器602可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器602可包括硬盘驱动器(hard disk drive，hdd)、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线(universal serial bus，usb)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器602可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器602可在综合网关容灾设备的内部或外部。在特定实施例中，存储器602是非易失性固态存储器。
170.存储器可包括只读存储器(rom)，随机存取存储器(ram)，磁盘存储介质设备，光存储介质设备，闪存设备，电气、光学或其他物理/有形的存储器存储设备。因此，通常，存储器包括一个或多个编码有包括计算机可执行指令的软件的有形(非暂态)可读存储介质(例如，存储器设备)，并且当该软件被执行(例如，由一个或多个处理器)时，其可操作来执行参考根据本公开的一方面的方法所描述的操作。
171.处理器601通过读取并执行存储器602中存储的程序指令，以实现上述实施例中的任意一种方法。
172.在一个示例中，电子设备还可包括通信接口603和总线610。其中，处理器601、存储器602、通信接口603通过总线610连接并完成相互间的通信。
173.通信接口603，主要用于实现本技术实施例中各模块、装置、单元和/或设备之间的通信。
174.总线610包括硬件、软件或两者，将在线数据流量计费设备的部件彼此耦接在一起。举例来说而非限制，总线可包括加速图形端口(agp)或其他图形总线、增强工业标准架构(eisa)总线、前端总线(fsb)、超传输(ht)互连、工业标准架构(isa)总线、无限带宽互连、
低引脚数(lpc)总线、存储器总线、微信道架构(mca)总线、外围组件互连(pci)总线、pci-express(pci-x)总线、串行高级技术附件(sata)总线、视频电子标准协会局部(vlb)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线610可包括一个或多个总线。尽管本技术实施例描述和示出了特定的总线，但本技术考虑任何合适的总线或互连。
175.另外，结合上述实施例中的方法，本技术实施例可提供一种存储介质来实现。该存储介质上存储有程序指令；该程序指令被处理器执行时实现上述实施例中的任意一种方法。
176.本技术实施例另提供了一种芯片，芯片包括处理器和通信接口，通信接口和处理器耦合，处理器用于运行程序或指令，实现上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
177.应理解，本技术实施例提到的芯片还可以称为系统级芯片、系统芯片、芯片系统或片上系统芯片等。
178.本技术实施例提供一种计算机程序产品，该程序产品被存储在存储介质中，该程序产品被至少一个处理器执行以实现如上述方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
179.需要明确的是，本技术并不局限于上文所描述并在图中示出的特定配置和处理。为了简明起见，这里省略了对已知方法的详细描述。在上述实施例中，描述和示出了若干具体的步骤作为示例。但是，本技术的方法过程并不限于所描述和示出的具体步骤，本领域的技术人员可以在领会本技术的精神后，作出各种改变、修改和添加，或者改变步骤之间的顺序。
180.以上的结构框图中所示的功能模块可以实现为硬件、软件、固件或者它们的组合。当以硬件方式实现时，其可以例如是电子电路、专用集成电路(asic)、适当的固件、插件、功能卡等等。当以软件方式实现时，本技术的元素是被用于执行所需任务的程序或者代码段。程序或者代码段可以存储在机器可读介质中，或者通过载波中携带的数据信号在传输介质或者通信链路上传送。“机器可读介质”可以包括能够存储或传输信息的任何介质。机器可读介质的例子包括电子电路、半导体存储器设备、rom、闪存、可擦除rom(erom)、软盘、cd-rom、光盘、硬盘、光纤介质、射频(rf)链路，等等。代码段可以经由诸如因特网、内联网等的计算机网格被下载。
181.还需要说明的是，本技术中提及的示例性实施例，基于一系列的步骤或者装置描述一些方法或系统。但是，本技术不局限于上述步骤的顺序，也就是说，可以按照实施例中提及的顺序执行步骤，也可以不同于实施例中的顺序，或者若干步骤同时执行。
182.上面参考根据本公开的实施例的方法、装置(系统)和程序产品的流程图和/或框图描述了本公开的各方面。应当理解，流程图和/或框图中的每个方框以及流程图和/或框图中各方框的组合可以由计算机程序指令实现。这些程序指令可被提供给通用计算机、专用计算机、或其它可编程数据处理装置的处理器，以产生一种机器，使得经由计算机或其它可编程数据处理装置的处理器执行的这些指令使能对流程图和/或框图的一个或多个方框中指定的功能/动作的实现。这种处理器可以是但不限于是通用处理器、专用处理器、特殊应用处理器或者现场可编程逻辑电路。还可理解，框图和/或流程图中的每个方框以及框图
和/或流程图中的方框的组合，也可以由执行指定的功能或动作的专用硬件来实现，或可由专用硬件和计算机指令的组合来实现。
183.以上，仅为本技术的具体实施方式，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。应理解，本技术的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本技术揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本技术的保护范围之内。

技术特征：
1.一种网络图片显示方法，其特征在于，所述方法包括：获取多个网络图片的图片信息，所述图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列；接收用户输入的拖拽操作，所述拖拽操作用于拖拽所述多个网络图片中的第一图片；响应于所述拖拽操作，获得所述第一图片的实时拖拽轨迹；在所述实时拖拽轨迹位于所述第一图片对应的目标种类的显示区域内的情况下，将所述第一图片拖拽至目标位置，并对所述目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序；对所述目标种类的显示区域内的每个网络图片，按照所述目标排序顺序在所述目标种类的显示区域内显示。2.根据权利要求1所述的方法，其特征在于，在所述接收用户输入的拖拽操作之前，所述方法还包括：获取所述多个网络图片中属于所述目标种类的目标图片组；根据所述目标图片组中每个网络图片的图片信息，确定所述目标图片组的初始排序顺序；在所述对所述目标种类的显示区域内的每个网络图片，按照所述目标排序顺序在所述目标种类的显示区域内显示之后，所述方法还包括：将所述初始排序顺序更新为所述目标排序顺序。3.根据权利要求1所述的方法，其特征在于，在所述接收用户输入的拖拽操作之前，所述方法还包括：对每个网络图片绑定拖拽事件，所述拖拽事件用于触发所述多个网络图片根据拖拽操作进行重新排序；所述响应于所述拖拽操作，获得所述第一图片的实时拖拽轨迹，包括：基于所述拖拽事件，实时获取所述第一图片的拖拽轨迹。4.根据权利要求3所述的方法，其特征在于，所述在所述实时拖拽轨迹位于所述第一图片对应的目标种类的显示区域内的情况下，将所述第一图片拖拽至目标位置，包括：基于所述拖拽轨迹，确定所述第一图片拖拽的起始区域和目标区域；在所述目标区域位于所述目标显示区域内的情况下，更改所述目标区域的显示样式以将所述目标区域设置为可放置区域；基于所述拖拽事件，将所述第一图片放置在所述目标区域；在所述目标区域存在第二图片的情况下，将所述第二图片切换至所述起始区域，所述第二图片的图片种类和所述第一图片的图片种类相同。5.根据权利要求3所述的方法，其特征在于，所述拖拽事件包括以下至少一种：起始事件，所述起始事件用于在所述拖拽操作开始时记录拖拽的第一图片的初始图片信息；切换事件，所述切换事件用于在所述第一图片拖拽至预设区域的情况下，更改所述预设区域的显示样式，以及所述第一图片的显示样式；结束事件，所述结束事件用于在所述拖拽操作结束的情况下，对所述第一图片对应的
目标显示区域的每个网络图片进行重新排序。6.根据权利要求1所述的方法，其特征在于，所述对所述目标种类的显示区域内的每个网络图片，按照所述目标排序顺序在所述目标种类的显示区域内显示，包括：按照所述目标排序顺序依次下载目标种类的显示区域内的每个网络图片；在每个网络图片下载完成的情况下，按照所述目标排序顺序在所述目标显示区域显示网络图片；所述按照所述目标排序顺序依次下载每个图片，包括：获取当前图片下载数量；在所述当前图片下载数量小于预设最大下载数量的情况下，按照所述目标排序顺序依次下载每个图片。7.根据权利要求6所述的方法，其特征在于，所述在所述当前图片下载数量小于预设最大下载数量的情况下，按照所述目标排序顺序依次下载每个图片，包括：监控所述目标种类的显示区域所在的网页页面的统一资源定位系统url的哈希值；在所述哈希值未发生变化的情况下，按照所述目标排序顺序依次下载每个图片；在所述哈希值发生变化的情况下，停止下载网络图片。8.一种网络图片显示装置，其特征在于，所述装置包括：获取模块，用于获取多个网络图片的图片信息，所述图片信息包括图片种类和图片序号，其中，图片种类相同的网络图片具有一个对应的显示区域，图片种类相同的网络图片在对应的显示区域中按照图片序号的大小依次排列；接收模块，用于接收用户输入的拖拽操作，所述拖拽操作用于拖拽所述多个网络图片中的第一图片；响应模块，用于响应于所述拖拽操作，获得所述第一图片的实时拖拽轨迹；排序模块，用于在所述实时拖拽轨迹位于所述第一图片对应的目标种类的显示区域内的情况下，将所述第一图片拖拽至目标位置，并对所述目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序；显示模块，用于对所述目标种类的显示区域内的每个网络图片，按照所述目标排序顺序在所述目标种类的显示区域内显示。9.一种电子设备，其特征在于，所述设备包括：处理器以及存储有计算机程序指令的存储器；所述处理器执行所述计算机程序指令时实现如权利要求1-7任意一项所述的网络图片显示方法。10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序指令，所述计算机程序指令被处理器执行时实现如权利要求1-7任意一项所述的网络图片显示方法。11.一种计算机程序产品，其特征在于，所述计算机程序产品中的指令由电子设备的处理器执行时，使得所述电子设备执行如权利要求1-7任意一项所述的网络图片显示方法。

技术总结
本申请涉及数据处理技术领域，本申请提供了一种网络图片显示方法、装置、设备、介质及产品，通过获取多个网络图片的图片信息，图片信息包括图片种类和图片序号，图片种类相同的网络图片对应一个显示区域；接收用户输入的拖拽操作；响应于拖拽操作，获得第一图片的实时拖拽轨迹；在实时拖拽轨迹位于第一图片对应的目标种类的显示区域内的情况下，将第一图片拖拽至目标位置，并对目标种类的显示区域内的每个网络图片进行重新排序得到目标排序顺序；对目标种类的显示区域内的每个网络图片，按照目标排序顺序在目标种类的显示区域内显示；本申请实施例能够更改网络图片的显示顺序，提高网络图片显示的灵活性。图片显示的灵活性。图片显示的灵活性。


技术研发人员：周冲
受保护的技术使用者：建信金融科技有限责任公司
技术研发日：2023.06.19
技术公布日：2023/10/7