CN109032461A - 页面中的图片位置调整方法、装置、服务器和存储介质 - Google Patents

Abstract

本申请提供一种页面中的图片位置调整方法，包括依据多种图片类型，对当前页面进行区域划分，得到多个子页面；将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片；依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示。本申请方法，通过将图片按照类型分成不同的子页面显示，通过拖拽实现子页面间的图片位置调整，使用户操作更加方便。本申请还提供了一种页面中的图片位置调整装置、服务器和存储介质。

Description

页面中的图片位置调整方法、装置、服务器和存储介质

技术领域

本申请涉及计算机技术领域，具体而言，本申请涉及一种页面中的图片位置调整方法、装置、服务器和存储介质。

背景技术

现有的基于浏览器展现的web页面，当web页面的图片展示区域中展示多种类型的图片时，若图片数目较多，则可能会给用户带来执行图片查阅、调整图片位置等方面操作的不便，从而导致用户浏览较大数量的图片时信息获取效率低下。

在一种特定的应用场景下，某用户需要通过web页面查阅汽车图片，若提供至用户的一个页面上显示多张汽车图片，但多张汽车图片无序排布，则导致用户若欲在该页面中查询某一品牌车型的汽车图片，查询难度较大，且查询效率低。

因此，现有技术中的缺陷是：基于多种图片类型的图片在图片展示页面无序展示时，若图片数目较多，则导致用户在展示页面执行图片查阅等操作时，查询难度大，操作效率低。

发明内容

本申请的目的旨在至少能解决上述的技术缺陷之一，特别是当前的页面图片展示方式给用户带来的图片操作难度大的技术缺陷。

第一方面，本申请提供一种页面中的图片位置调整方法，该方法包括如下步骤：

依据多种图片类型，对当前页面进行区域划分，得到多个子页面；

将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片；

依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示。

第二方面，本申请还提供一种页面中的图片位置调整装置，该装置包括：

页面划分单元，用于依据多种图片类型，对当前页面进行区域划分，得到多个子页面；

位置显示关系建立单元，用于将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片；

图片位置调整单元，用于依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示。

第三方面，本申请还提供一种服务器，该服务器包括：存储器，用于存储可执行程序；处理器，用于执行存储器中存储的可执行程序时，实现上述第一方面的方法。

第四方面，本申请还提供一种存储有计算机可读指令的存储介质，计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行上述第一方面的方法。

本申请的优点：将大量图片按照图片的不同图片类型对当前页面进行区域划分，划分成多个子页面，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片，通过此种方式，在当前页面上提供至用户浏览的图片是按照不同图片类型排布显示在对应子页面上的，即至少一张图片按照图片类型在当前页面有序排布，使得用户浏览当前页面时可按照图片类型有针对性地进行图片浏览，快速定位与其查看需求相匹配的图片，提高了用户的图片查看效率；进一步地，服务器接收用户发送的查询或移动任一目标图片的拖拽指令时，只需调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示，通过此种方式即可实现目标图片在当前页面上的显示位置的调整，使用户的操作更加便捷，效率更高。

本申请附加的方面和优点将在下面的描述中部分给出，这些将从下面的描述中变得明显，或通过本申请的实践了解到。

附图说明

本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为本申请提供的一种页面中的图片位置调整方法第一实施例的方法流程图；

图2为本申请提供的一种页面中的图片位置调整方法第一实施例中子页面划分示意图；

图3为本申请提供的一种页面中的图片位置调整方法第二实施例的方法流程图；

图4为本申请提供的一种页面中的图片位置调整方法第二实施例中区块划分示意图；

图5为本申请提供的一种页面中的图片位置调整方法第三实施例中图片在相同子页面拖拽后的位置示意图；

图6为本申请提供的一种页面中的图片位置调整方法第三实施例中图片在不同子页面中拖拽后的位置示意图；

图7为本申请提供的一种页面中的图片位置调整方法第四实施例中图片在子页面中删除后的位置示意图；

图8为本申请提供的一种页面中的图片位置调整装置第一实施例的结构示意图；

图9为本申请提供的一种服务器的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，仅用于解释本申请，而不能解释为对本申请的限制。

本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本申请所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非像这里一样被特定定义，否则不会用理想化或过于正式的含义来解释。

本技术领域技术人员可以理解，这里所使用的“终端”、“终端设备”既包括无线信号接收器的设备，其仅具备无发射能力的无线信号接收器的设备，又包括接收和发射硬件的设备，其具有能够在双向通讯链路上，执行双向通讯的接收和发射硬件的设备。这种设备可以包括：蜂窝或其他通讯设备，其具有单线路显示器或多线路显示器或没有多线路显示器的蜂窝或其他通讯设备；PCS(Personal Communications Service，个人通讯***)，其可以组合语音、数据处理、传真和/或数据通讯能力；PDA(Personal Digital Assistant，个人数字助理)，其可以包括射频接收器、寻呼机、互联网/内联网访问、网络浏览器、记事本、日历和/或GPS(Global Positioning System，全球定位***)接收器；常规膝上型和/或掌上型计算机或其他设备，其具有和/或包括射频接收器的常规膝上型和/或掌上型计算机或其他设备。这里所使用的“终端”、“终端设备”可以是便携式、可运输、安装在交通工具(航空、海运和/或陆地)中的，或者适合于和/或配置为在本地运行，和/或以分布形式，运行在地球和/或空间的任何其他位置运行。这里所使用的“终端”、“终端设备”还可以是通讯终端、上网终端、音乐/视频播放终端，例如可以是PDA、MID(Mobile Internet Device，移动互联网设备)和/或具有音乐/视频播放功能的移动电话，也可以是智能电视、机顶盒等设备。

对于终端web页面的图片展示区域需要显示大量图片的情景下，通过以下实施例中的方法，可使图片在页面上有序排布，方便用户查看，且用户通过拖拽即可实现对图片与对应显示页面的位置显示关系的调整，节省用户操作时间，提高用户体验。以下实施例中的页面中的图片位置调整方法，从以下几个方面对现有技术进行优化。

第一方面，下面对本申请提供的一种页面中的图片位置调整方法的第一实施例进行介绍，参见图1所示，本实施例中方法包括：

步骤S101，依据多种图片类型，对当前页面进行区域划分，得到多个子页面。

其中，不同类型的图片存储在数据库中，在数据库中，图片可以按照不同类别，不同时间，不同订单进行分类存储。以汽车图片为例，按照汽车的不同类别进行分类，可分为载客车、货车和特殊用途汽车；按照汽车的上市时间进行分类，可分为不同年份上市的汽车；按照不同订单进行分类，可分为租赁汽车订单的汽车和购买汽车订单的汽车。本实施例中不限定上述几种分类方式，可根据图片的实际情况自定义图片的类型，满足不同的图片分类需求。

其中，子页面的个数可通过配置进行限定，限定子页面的个数可使当前页面的布局更合理。

其中，当前页面指的是浏览器web页面显示时对应的当前页面。

步骤S102，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片。

举例说明，参见图2，A和B两个子页面是按照两个类型划分后的子页面，在当前页面按照左和右的位置关系进行划分，则在划分后使得子页面A和B在当前页面中以左右关系进行显示。

为了便于浏览当前页面中任一子页面中的图片，服务器端将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片，比如上述汽车图片，按照汽车的两个上市时间，对当前页面进行区域划分，得到A和B两个子页面，第一个上市时间的汽车图片对应子页面A，第二个上市时间的汽车图片对应子页面B，建立第一上市时间对应的汽车图片与子页面A的位置显示关系，使得子页面A显示第一上市时间对应的汽车图片；建立第二上市时间对应的汽车图片与子页面B的位置显示关系，使得子页面B显示第二上市时间对应的汽车图片。

进一步地，每个子页面显示的图片类型不固定。由于是按照图片类型进行区域的划分，因此每个子页面显示的图片类型可以调整，可根据实际需求进行更换。

步骤S103，依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示。

其中，服务器接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，在子页面中调整图片的显示位置，包括调整相同子页面中图片的显示位置和不同子页面中图片的显示位置，使得图片在子页面中的位置显示关系通过拖拽随意进行调整。

由此，本实施例中记载的方案，将大量图片按照图片的不同图片类型对当前页面进行区域划分，划分成多个子页面，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片，通过此种方式，在当前页面上提供至用户浏览的图片是按照不同图片类型排布显示在对应子页面上的，即至少一张图片按照图片类型在当前页面有序排布，使得用户浏览当前页面时可按照图片类型有针对性地进行图片浏览，快速定位与其查看需求相匹配的图片，提高了用户的图片查看效率；进一步地，服务器接收用户发送的查询或移动任一目标图片的拖拽指令时，只需调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示，通过此种方式即可实现目标图片在当前页面上的显示位置的调整，使用户的操作更加便捷，效率更高。

下面对本申请提供的一种页面中的图片位置调整方法的第二实施例进行介绍：

基于实施例一中记载的方案，进一步地，步骤S101中，任一图片类型包括多个子类，则本实施例具体包括如下步骤：

步骤S201，根据任一图片类型的多个子类，在任一图片类型对应的子页面中划分与各个子类对应的区块。

其中，每个图片类型包括多个子类，一个图片类型中的多个子类表示该图片类型对应的图片被分成多个子类，以使得对图片进行了更细致的划分；进一步地，针对任一图片类型对应的子页面，基于该图片类型的多个子类对子页面进行进一步的划分，使得对子页面进行了更细致的划分。

举例说明，不同类型的图片按照不同子类存储在数据库中，比如上述汽车图片，按照汽车品牌分成两类，宝马品牌的车和奔驰品牌的车，则按照宝马品牌车和奔驰品牌车两个图片类型将当前页面划分成两个子页面A和B，宝马品牌车对应子页面A，奔驰品牌车对应子页面B；宝马品牌的车和奔驰品牌的车还分别包括多个子类，比如宝马品牌分为不同颜色的车，即每个品牌的车对应不同颜色的车，包括黑色宝马车，白色宝马车和红色宝马车；奔驰品牌的车也同样包括黑色奔驰车，白色奔驰车和红色奔驰车；按照宝马品牌车的三个颜色子类，将宝马品牌车对应的子页面A划分出三个区块A1-1，A1-2和A1-3；同理，按照奔驰品牌车的三个颜色子类，将奔驰品牌车对应的子页面B划分出三个区块B1-1，B1-2和B1-3。

步骤S202，将获取的多张图片分别按照任一图片类型的多个子类与相应的区块建立位置显示关系，以使得在任一区块上显示与任一区块对应的子类相匹配的至少一张图片。

其中，为了便于浏览子页面区块中的图片，服务器端建立多个图片与子页面中区块的位置显示关系，以使得不同区块中对应显示不同子类对应的图片。

接上例，按照宝马品牌车的三个颜色子类，将宝马品牌车对应的子页面A划分出三个区块A1-1，A1-2和A1-3，使得区块A1-1中显示与区块A1-1对应的黑色宝马车相匹配的图片，区块A1-2中显示与区块A1-2对应的白色宝马车相匹配的图片，区块A1-3中显示与区块A1-3对应的红色宝马车相匹配的图片；同理，按照奔驰品牌车的三个颜色子类，将奔驰品牌车对应的子页面B划分出三个区块B1-1，B1-2和B1-3，使得区块B1-1中显示与区块B1-1对应的黑色奔驰车相匹配的图片，区块B1-2中显示与区块B1-2对应的白色奔驰车相匹配的图片，区块B1-3中显示与区块B1-3对应的红色奔驰车相匹配的图片。

步骤S203，依据接收到的针对多个子页面中的任一第一区块上的目标图片的拖拽指令，调整目标图片与第一区块的位置显示关系，以使得目标图片在当前区块上位于调整后的位置显示关系所对应的位置上显示。

其中，服务器根据接收到的来自终端的针对任一图片的拖拽指令，在区块中调整图片的显示位置，包括调整相同区块中图片的显示位置和不同区块中图片的显示位置，使得图片在区块中的位置显示关系通过拖拽随意进行调整。

进一步地，在数据库中，为图片的不同图片类型对应设置唯一ID，通过ID对图片的不同图片类型进行区分，以便在数据库中便于存储和查找。比如，对于汽车图片，按照汽车品牌类型，对宝马和奔驰两个图片类型分别设置编码ID1和ID2，ID1代表宝马品牌，ID2代表奔驰品牌；宝马品牌还分为不同颜色的车，即每个品牌的车对应不同颜色的车，比如宝马品牌车包括黑色宝马车，白色宝马车和红色宝马车，奔驰品牌车包括黑色奔驰车，白色奔驰车和红色奔驰车，那么将红色宝马车的编码对应设置为ID1red，黑色宝马车的编码对应设置为ID1black，白色宝马车的编码对应设置为ID1white；同理，将红色奔驰车的编码对应设置为ID2red，黑色奔驰车的编码对应设置为ID2black，白色奔驰车的编码对应设置为ID2white。

进一步地，对于不同的用户需求，比如当前页面需要显示不同图片类型的图片，那么可针对不同的需求，进行图片类型的配置。在数据库中选取数量不定的图片时，接收配置图片类型的指令；根据配置图片类型的指令，在数据库中选取对应图片类型的图片。例如，用户可根据图片查询需求，在终端提供的人机交互接口输入进行图片类型的配置指令，服务器接收到该配置指令后可按照配置指令指示的图片类型进行图片类型的配置；也可预置图片类型的配置信息，比如，预设的配置信息为按照时间对汽车图片分类，那么配置完成后的当前页面按照汽车品牌发布时间进行区域划分。

本实施例中，步骤S202和步骤S203执行的其他方案与实施例一中步骤S102和步骤S103执行的方案相同或相似，因此，在本实施例中对于步骤S202和步骤S203所执行的具体方案不再一一赘述。

由此，本实施例中的方案基于实施例一中方案的基础上，按照图片类型的多个子类对子页面进行划分，使图片类型划分的更细致，划分子页面得到的区块中显示与该区块对应的子类相匹配的图片，通过此种方式，在当前页面上提供至用户浏览的图片是按照图片类型的多个子类排布显示在对应子页面的区块上的，即多张图片按照图片类型的多个子类在当前页面有序排布，使得用户浏览当前页面时可按照图片类型的多个子类有针对性进行图片浏览，更快递定位与其查看需求相匹配的图片，提高了用户的图片查看效率；进一步地，服务器接收用户发送的查询或移动任一图片的拖拽指令时，只需调整目标图片与第一区块的位置显示关系，即可实现目标图片在页面上的显示位置的调整，使得当前区块显示的图片更便于用户查询和移动，操作效率进一步得到提高。

下面对本申请提供的一种页面中的图片位置调整方法的第三实施例进行介绍：

基于实施例一和实施例二中的方案，进一步地，步骤S103中，依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，具体包括：

依据接收到的针对任一图片的拖拽指令指示的结束位置，确定结束位置所在的第二子页面；

将目标图片与第一子页面的位置显示关系改为目标图片与第二子页面的位置显示关系。

基于实施例一中的方案，其中，第二子页面可以是与该图片进行拖拽前相同的子页面，也可以是与该图片所在子页面不同的子页面。同理，基于实施例二的方案中，将目标图片与第一子页面中任一区块的位置显示关系改为目标图片与第二子页面中任一区块的位置显示关系，第二子页面中的区块可以是该图片所在子页面的区块，也可以是与该图片所在子页面不同的子页面中的区块。基于图片与子页面或子页面中区块的位置显示关系进行图片的拖拽，使得实现图片在子页面或子页面区块中的位置显示关系调整更简单，更快速。

进一步地，步骤S102中，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片，具体包括：

将获取的多张图片分别按照图片类型与相应的子页面中的位置编码建立对应关系，以使得在单个子页面中显示与位置编码相匹配的至少一张图片。

其中，在任一子页面中设置多个位置编码，每个位置编码对应一张图片。举例说明，子页面A1设置10个位置编码，每个位置编码对应一张图片，其中，对应位置编码为a1，a2，……a10。

同理，在实施例二中，如果将子页面按照图片类型的各个子类进行区块的划分，则将获取的多张图片分别按照任一图片类型的多个子类与相应的区块建立位置显示关系，以使得在任一区块上显示与任一区块对应的子类相匹配的至少一张图片，具体包括：

将获取的多张图片分别按照图片类型与相应的区块中任一位置编码的对应关系，以使得在任一区块中显示与位置编码相匹配的至少一张图片。在任一区块中设置多个位置编码，每个位置编码对应一张图片，举例说明，区块A1-1设置10个位置编码，每个位置编码对应一张图片，其中，10个位置编码分别为a1-1，a2-1，……a10-1。

本实施例中以第一子页面和第二子页面，以第一子页面和第二子页面为例，进行图片拖拽的描述：

A、接收用户通过鼠标点击目标图片发送的目标图片拖拽指令，目标图片在第一子页面中。

B、服务器根据图片拖拽指令，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片。

其中，如果第一子页面与第二子页面为相同的子页面，则表示在同一子页面中，对该图片与该子页面的位置显示关系进行调整。如果第一子页面与第二子页面为不同的子页面，则表示在不同子页面中，将该图片与第一子页面的位置显示关系调整为该图片与第一子页面的位置显示关系。

进一步地，每个子页面对应唯一编码，基于子页面的编码判断第一子页面与第二子页面是否为同一子页面，具体包括：

将第一子页面的第一编码与第二子页面的第二编码进行比对，如果第一编码与第二编码一致，表示第一子页面与第二子页面为同一子页面，否则为不同的子页面。

进一步地，如果第一子页面与第二子页面是相同的子页面，步骤S103中，将目标图片与第一子页面的位置显示关系改为目标图片与第二子页面的位置显示关系，包括：

将目标图片与第一子页面的位置显示关系改为目标图片与第二子页面中的最后一个位置编码的对应关系。

其中，上述方案实质是在同一子页面调整目标图片的显示位置。参见图5，将目标图片在第二子页面B中的位置编码进行调整，以实现该图片在第二子页面B中的显示位置排序；举例说明：将目标图片与所在第二子页面B的最后位置编码b5的位置显示关系进行调整，调整至该目标图片与第二子页面B的位置编码b2的位置显示关系，即调整目标图片与第二子页面B的最后位置编码b5的位置显示关系为目标图片与第二子页面B的位置编码b2的位置显示关系，调整后的位置显示关系如图5所示，图5中第二子页面B中对应显示的每个形状代表不同的图片。

如果第一子页面与第二子页面是不同的子页面，步骤S103中，依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示，具体包括：

依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，将目标图片与第一子页面的第一位置显示关系改为目标图片与第二子页面的第二位置显示关系，第一位置显示关系与第二位置显示关系为不同的位置显示关系。

举例说明，参见图6，汽车图片与第一子页面A位置编码a2的对应关系，通过上述方式调整至该汽车图片与第二子页面B最后位置编码b5的对应关系，通过拖拽调整该汽车图片与第二子页面B的位置显示关系后，只有该汽车图片与第二子页面B中位置编码b5的对应关系发生变化。

由此，本实施例中，服务器将获取的多张图片分别按照图片类型与相应的子页面中的至少一个位置编码建立对应关系，以使得在单个子页面中显示与位置编码相匹配的至少一张图片，基于图片与子页面中位置编码的对应关系，实现图片与子页面的位置显示关系调整，方法简单，便于实现，服务器计算量小，从而提高服务器响应速度快。进一步地，服务器接收用户发送的查询或移动任一图片的拖拽指令时，只需基于拖拽指令调整已建立的该图片与对应子页面中位置编码的对应关系，即可实现图片在相同子页面和不同子页面上的显示位置的调整，使用户的操作更加便捷，效率更高。

下面对本申请提供的一种页面中的图片位置调整方法的第四实施例进行介绍：

基于上述任一实施例中的方案，该方法还包括步骤S104：依据接收到的针对多个子页面中的任一第一子页面中的目标图片的删除拖拽指令，将目标图片与对应第一子页面的位置关系解除。

其中，在每个子页面中，图片以图片序列的方式展示。

其中，任一目标图片与所在子页面的位置关系解除后，对该子页面中的其他图片与位置编码的位置显示关系进行顺序调整。具体为：将待删除图片之后的所有图片与位置编码的位置显示关系依次向前调整，待删除图片之前的所有图片与位置编码的位置显示关系不变。

举例说明：参见图7，以图片序列的方式在第一子页面A对应设置10个位置编码，每个位置编码对应一张图片，10个位置编码依次为c1，c2，····c10；用户在终端提供的人机交互接口输入进行图片拖拽删除的指令，删除位置编码c4对应的图片，服务器接收到该拖拽删除的指令后，按照图片拖拽删除指令将位置编码c4对应的图片与第一子页面A中的位置关系解除。同时，对应的此图片之后的所有图片与位置编码的位置显示关系依次向前调整，即该图片之后的所有图片与位置编码c5至c10的位置编码的位置关系依次向前调整，该图片之前的所有图片与位置编码的位置显示关系不变，即该图片之前的所有图片与位置编码c1至c3的位置显示关系不变，由于第一子页面A中已经解除了一张图片与位置编码c4的位置显示关系，因此，该第一子页面A中只剩下9个位置编码，位置编码c9变为第一子页面A中的最后位置编码，此时该第一子页面A中的图片序列只显示9张图片。

进一步地，在每个子页面上显示的图片按照所定义的图片样式显示在对应的子页面，具体地，预先定义的图片样式为一字型、品字型、田字型、九宫格型和圆环型中的一种或几种。

进一步地，同一个页面中的多个标签页之间不能拖拽，不同的标签页之间只能通过按钮指定位置移动，但是可以在当前标签页中随意拖动图片。

由此，本实施例中，用户通过终端提供的人机交互接口输入删除拖拽指令，服务器根据该删除拖拽指令解除该图片与子页面的位置关系，实现该图片在对应子页面的拖拽删除；通过此种方式，在当前页面上提供至用户浏览的图片中，如果用户想删除浏览图片中的某张图片，只需基于拖拽删除指令解除已建立的该图片与对应子页面的位置关系，即可实现图片在子页面上的删除；进一步地，图片与对应子页面的位置关系解除后，该子页面中的其他图片仍可进行图片与该子页面的位置显示关系的调整；因此，基于上述任一实施例中记载的对图片与子页面的位置显示关系进行调整的方案，结合本实施例中将图片与对应子页面的位置关系解除的方案，使图片与对应子页面的位置显示关系不仅可以调整，还可以解除，满足不同用户对当前页面上提供的浏览图片进行移动、删除等操作的不同需求，进一步提高用户体验。

第二方面，下面对本申请提供的一种页面中的图片位置调整装置30的第一实施例进行介绍，参见图8所示，本实施例中装置30包括：

页面划分模块301，用于据多种图片类型，对当前页面进行区域划分，得到多个子页面。

其中，不同类型的图片存储在数据库中，在数据库中，图片可以按照不同类别，不同时间，不同订单进行分类存储。本实施例中不限定上述几种分类方式，可根据图片的实际情况自定义图片的类型，满足不同的图片分类需求。

其中，子页面的个数可通过配置进行限定。限定子页面的个数可使当前页面的布局更合理。

其中，当前页面指的是浏览器web页面显示时对应的当前页面。

位置显示关系建立模块302，用于将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片。

其中，为了便于浏览当前页面中任一子页面中的图片，服务器端通过位置显示关系建立模块302将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片。

进一步地，每个子页面显示的图片类型不固定。由于是按照图片类型进行区域的划分，因此每个子页面显示的图片类型可以调整，可根据实际需求进行更换。

图片位置调整模块303，用于依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示。

其中，服务器接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，在子页面中调整图片的显示位置，包括调整相同子页面中图片的显示位置和不同子页面中图片的显示位置，使得图片在子页面中的位置显示关系通过拖拽随意进行调整。

由此，本实施例中记载的方案，将大量图片按照图片的不同图片类型对当前页面进行区域划分，划分成多个子页面，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片，通过此种方式，在当前页面上提供至用户浏览的图片是按照不同图片类型排布显示在对应子页面上的，即至少一张图片按照图片类型在当前页面有序排布，使得用户浏览当前页面时可按照图片类型有针对性地进行图片浏览，快速定位与其查看需求相匹配的图片，提高了用户的图片查看效率；进一步地，服务器接收用户发送的查询或移动任一目标图片的拖拽指令时，只需调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示，通过此种方式即可实现目标图片在当前页面上的显示位置的调整，使用户的操作更加便捷，效率更高。

下面对本申请提供的一种页面中的图片位置调整装置的第二实施例进行介绍：

进一步地，对于不同的用户需求，比如当前页面需要显示不同图片类型的图片，那么可针对不同的需求，进行图片类型的配置。在数据库中选取数量不定的图片时，接收配置图片类型的指令；根据配置图片类型的指令，在数据库中选取对应图片类型的图片。比如，用户可根据图片查询需求，在终端提供的人机交互接口输入进行图片类型的配置指令，服务器接收到该配置指令后可按照配置指令指示的图片类型进行图片类型的配置，也可预置图片类型的配置信息。

进一步地，页面划分模块301还包括页面划分子单元3011，用于根据任一图片类型的多个子类，在任一图片类型对应的子页面中划分与各个子类对应的区块。

其中，每个图片类型包括多个子类，一个图片类型中的多个子类表示该图片类型对应的图片被分成多个子类，以使得对图片进行了更细致的划分；进一步地，针对任一图片类型对应的子页面，基于该图片类型的多个子类对子页面进行进一步的划分，使得对子页面进行了更细致的划分。

进一步地，每个子页面显示的图片类型不固定。由于是按照图片类型进行区域的划分，因此每个子页面显示的图片类型可以调整，可根据实际需求进行更换。

进一步地，在数据库中，为图片的不同图片类型对应设置唯一ID，通过ID对图片的不同图片类型进行区分，以便在数据库中便于存储和查找。

由此，按照图片类型的多个子类对子页面进行划分，使图片类型划分的更细致，划分子页面得到的区块中显示与该区块对应的子类相匹配的图片，通过此种方式，在当前页面上提供至用户浏览的图片是按照图片类型的多个子类排布显示在对应子页面的区块上的，即多张图片按照图片类型的多个子类在当前页面有序排布，使得用户浏览当前页面时可按照图片类型的多个子类有针对性进行图片浏览，更快递定位与其查看需求相匹配的图片，提高了用户的图片查看效率；进一步地，服务器接收用户发送的查询或移动任一图片的拖拽指令时，只需调整目标图片与第一区块的位置显示关系，即可实现目标图片在页面上的显示位置的调整，使得当前区块显示的图片更便于用户查询和移动，操作效率进一步得到提高。

进一步地，图片位置调整单元303还包括第一图片位置调整子单元3031，具体用于依据接收到的针对任一图片的拖拽指令指示的结束位置，确定结束位置所在的第二子页面；

将目标图片与第一子页面的位置显示关系改为目标图片与第二子页面的位置显示关系。

其中，第二子页面可以是与该图片进行拖拽前相同的子页面，也可以是与该图片所在子页面不同的子页面。同理，如果子页面被划分成多个区块，其中，将目标图片与第一子页面中任一区块的位置显示关系改为目标图片与第二子页面中任一区块的位置显示关系，第二子页面中的区块可以是该图片所在子页面的区块，也可以是与该图片所在子页面不同的子页面中的区块。基于图片与子页面或子页面中区块的位置显示关系进行图片的拖拽，使得实现图片在子页面或子页面区块中的位置显示关系调整更简单，更快速。

进一步地，位置显示关系建立单元302中，还包括位置显示关系建立子单元3021，具体用于将获取的多张图片分别按照图片类型与相应的子页面中的位置编码建立对应关系，以使得在单个子页面中显示与位置编码相匹配的至少一张图片。

其中，在任一子页面中设置多个位置编码，每个位置编码对应一张图片。

同理，如果将子页面按照图片类型的各个子类进行区块的划分，则将获取的多张图片分别按照任一图片类型的多个子类与相应的区块建立位置显示关系，以使得在任一区块上显示与任一区块对应的子类相匹配的至少一张图片，具体包括：

建立任一区块中多个图片与该区块中任一位置编码的对应关系，以使得在任一区块中显示与位置编码相匹配的至少一张图片。在任一区块中设置多个位置编码，每个位置编码对应一张图片。

本实施例中以第一子页面和第二子页面，以第一子页面和第二子页面为例，进行图片拖拽的描述：

A、接收用户通过鼠标点击目标图片发送的目标图片拖拽指令，目标图片在第一子页面中。

B、服务器根据图片拖拽指令，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片。

其中，如果第一子页面与第二子页面为相同的子页面，则表示在同一子页面中，对该图片与该子页面的位置显示关系进行调整。如果第一子页面与第二子页面为不同的子页面，则表示在不同子页面中，将该图片与第一子页面的位置显示关系调整为该图片与第一子页面的位置显示关系。

进一步地，每个子页面对应唯一编码，基于子页面的编码判断第一子页面与第二子页面是否为同一子页面，具体包括：

将第一子页面的第一编码与第二子页面的第二编码进行比对，如果第一编码与第二编码一致，表示第一子页面与第二子页面为同一子页面，否则为不同的子页面。

进一步地，如果第一子页面与第二子页面是相同的子页面，在图片位置调整单元303中，将目标图片与第一子页面的位置显示关系改为目标图片与第二子页面的位置显示关系，包括：

将目标图片与第一子页面的位置显示关系改为目标图片与第二子页面中的最后一个位置编码的对应关系。

其中，上述方案实质是在同一子页面调整图片的显示位置。

如果第一子页面与第二子页面是不同的子页面，在图片位置调整单元303中，依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示，具体包括：

依据接收到的针对多个子页面中的任一第一子页面中的目标图片的拖拽指令，将目标图片与第一子页面的第一位置显示关系改为目标图片与第二子页面的第二位置显示关系，第一位置显示关系与第二位置显示关系为不同的位置显示关系。

由此，服务器将获取的多张图片分别按照图片类型与相应的子页面中的至少一个位置编码建立对应关系，以使得在单个子页面中显示与位置编码相匹配的至少一张图片，基于图片与子页面中位置编码的对应关系，实现图片与子页面的位置显示关系调整，方法简单，便于实现，服务器计算量小，从而提高服务器响应速度快。进一步地，服务器接收用户发送的查询或移动任一图片的拖拽指令时，只需基于拖拽指令调整已建立的该图片与对应子页面中位置编码的对应关系，即可实现图片在相同子页面和不同子页面上的显示位置的调整，使用户的操作更加便捷，效率更高。

进一步地，该装置还包括图片删除单元304，用于依据接收到的针对多个子页面中的任一第一子页面中的目标图片的删除拖拽指令，将目标图片与对应第一子页面的位置关系解除。

其中，在每个子页面中，图片以图片序列的方式展示。

其中，任一目标图片与所在子页面的位置关系解除后，对该子页面中的其他图片与位置编码的位置显示关系进行顺序调整。具体为：将待删除图片之后的所有图片与位置编码的位置显示关系依次向前调整，待删除图片之前的所有图片与位置编码的位置显示关系不变。

进一步地，在每个子页面上显示的图片按照所定义的图片样式显示在对应的子页面，具体地，预先定义的图片样式为一字型、品字型、田字型、九宫格型和圆环型中的一种或几种。

进一步地，同一个页面中的多个标签页之间不能拖拽，不同的标签页之间只能通过按钮指定位置移动，但是可以在当前标签页中随意拖动图片。子页面中还可能包括标签页，在标签页中显示的图片在同一个页面中不能拖拽，不同的标签页之间也只能通过按钮进行指定位置的移动。

由此，本实施例中，用户通过终端提供的人机交互接口输入删除拖拽指令，服务器根据该删除拖拽指令解除该图片与子页面的位置关系，实现该图片在对应子页面的拖拽删除；通过此种方式，在当前页面上提供至用户浏览的图片中，如果用户想删除浏览图片中的某张图片，只需基于拖拽删除指令解除已建立的该图片与对应子页面的位置关系，即可实现图片在子页面上的删除；进一步地，图片与对应子页面的位置关系解除后，该子页面中的其他图片仍可进行图片与该子页面的位置显示关系的调整；因此，基于上述任一实施例中记载的对图片与子页面的位置显示关系进行调整的方案，结合本实施例中将图片与对应子页面的位置关系解除的方案，使图片与对应子页面的位置显示关系不仅可以调整，还可以解除，满足不同用户对当前页面上提供的浏览图片进行移动、删除等操作的不同需求，进一步提高用户体验。

需要说明的是，上述页面中的图片位置调整方法的实施例一至实施例四中的方案均适用于本实施例中页面中的图片位置调整装置的方案，且上述实施例一至实施例四中记载的方案不仅限于上述实施例中记载的组合方案，在此不一一赘述，其均在本申请的保护范围内。

第三方面，本申请还提供一种服务器，参见图9，该服务器包括通过***总线连接的处理器、非易失性存储介质、存储器和网络接口。

该计算机设备的处理器用于提供计算和控制能力，支撑整个计算机设备的运行。该计算机设备的存储器中可存储有计算机可读指令，该计算机可读指令被处理器执行时，可使得处理器执行一种任务统计方法。该计算机设备的网络接口用于与终端连接通信。

其中，该计算机设备的非易失性存储介质存储有操作***、数据库和计算机可读指令，数据库中可存储有控件信息序列，该计算机可读指令被处理器执行时，可使得处理器实现一种页面中的图片位置调整方法。

处理器能实现图8所示实施例中的页面划分单元、位置显示关系建立单元和图片位置调整单元的功能，非易失性存储介质和存储器能实现图8所示实施例中所需的存储功能。

本领域技术人员可以理解，图9中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

第四方面，本申请还提供一种存储有计算机可读指令的存储介质，计算机可读指令被一个或多个处理器执行时，使得一个或多个处理器执行如第一方面页面中的图片位置调整方法。

本申请提供的页面中的图片位置调整方法、装置和存储介质，有以下优点：将大量图片按照图片的不同图片类型对当前页面进行区域划分，划分成多个子页面，将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与单个子页面对应的图片类型相匹配的至少一张图片，通过此种方式，在当前页面上提供至用户浏览的图片是按照不同图片类型排布显示在对应子页面上的，即至少一张图片按照图片类型在当前页面有序排布，使得用户浏览当前页面时可按照图片类型有针对性地进行图片浏览，快速定位与其查看需求相匹配的图片，提高了用户的图片查看效率；进一步地，服务器接收用户发送的查询或移动任一目标图片的拖拽指令时，只需调整目标图片与第一子页面的位置显示关系，以使得目标图片在当前页面上位于调整后的位置显示关系所对应的位置上显示，通过此种方式即可实现目标图片在当前页面上的显示位置的调整，使用户的操作更加便捷，效率更高。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

本领域普通技术人员可以理解，上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等非易失性存储介质，或随机存储记忆体(Random Access Memory，RAM)等。

以上所述仅是本申请的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种页面中的图片位置调整方法，其特征在于，包括：

依据多种图片类型，对当前页面进行区域划分，得到多个子页面；

将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与所述单个子页面对应的图片类型相匹配的至少一张图片；

依据接收到的针对所述多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整所述目标图片与所述第一子页面的位置显示关系，以使得所述目标图片在所述当前页面上位于调整后的位置显示关系所对应的位置上显示。

2.根据权利要求1所述的页面中的图片位置调整方法，其特征在于，任一图片类型包括多个子类；

其中，所述依据多种图片类型，对当前页面进行区域划分，得到多个子页面，具体包括：

根据任一图片类型的多个子类，在所述任一图片类型对应的子页面中划分与各个子类对应的区块。

3.根据权利要求1或2所述的页面中的图片位置调整方法，其特征在于，所述依据接收到的针对所述多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整所述目标图片与所述第一子页面的位置显示关系，具体包括：

依据接收到的针对任一图片的拖拽指令指示的结束位置，确定所述结束位置所在的第二子页面；

将所述目标图片与所述第一子页面的位置显示关系改为所述目标图片与第二子页面的位置显示关系。

4.根据权利要求3所述的页面中的图片位置调整方法，其特征在于，所述将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与所述单个子页面对应的图片类型相匹配的至少一张图片，具体包括：

将获取的多张图片分别按照图片类型与相应的子页面中的至少一个位置编码建立对应关系，以使得在单个子页面中显示与位置编码相匹配的至少一张图片。

5.根据权利要求4所述的页面中的图片位置调整方法，其特征在于，所述将所述目标图片与所述第一子页面的位置显示关系改为所述目标图片与第二子页面的位置显示关系，包括：

将所述目标图片与所述第一子页面的位置显示关系改为所述目标图片与所述第二子页面中的最后一个位置编码的对应关系。

6.根据权利要求3所述的页面中的图片位置调整方法，其特征在于，所述依据接收到的针对所述多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整所述目标图片与所述第一子页面的位置显示关系，具体包括：

依据接收到的针对所述多个子页面中的任一第一子页面中的目标图片的拖拽指令，将所述目标图片与所述第一子页面的第一位置显示关系改为所述目标图片与第二子页面的第二位置显示关系，所述第一位置显示关系与第二位置显示关系为不同的位置显示关系。

7.根据权利要求1所述的页面中的图片位置调整方法，其特征在于，所述方法还包括：

依据接收到的针对所述多个子页面中的任一第一子页面中的目标图片的删除拖拽指令，将所述目标图片与对应第一子页面的位置关系解除。

8.一种页面中的图片位置调整装置，其特征在于，包括：

页面划分模块，用于依据多种图片类型，对当前页面进行区域划分，得到多个子页面；

位置显示关系建立模块，用于将获取的多张图片分别按照图片类型与相应的子页面建立位置显示关系，以使得在单个子页面中显示与所述单个子页面对应的图片类型相匹配的至少一张图片；

图片位置调整模块，用于依据接收到的针对所述多个子页面中的任一第一子页面中的目标图片的拖拽指令，调整所述目标图片与所述第一子页面的位置显示关系，以使得所述目标图片在所述当前页面上位于调整后的位置显示关系所对应的位置上显示。

9.一种服务器，其特征在于，包括：存储器，用于存储可执行程序；处理器，用于执行所述存储器中存储的所述可执行程序时，实现权利要求1至7任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1至7任一项所述的方法。