CN105045587A - 一种图片展示方法及装置 - Google Patents

Abstract

本发明公开了一种图片展示方法及装置，用以实现以图片墙的布局展示图片的目的。所述图片展示方法包括：获得在web页面上展示图片的触发；根据所述触发调用预设的图片墙展示插件；将待展示图片加载到所述图片墙展示插件中；利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片。

Description

一种图片展示方法及装置

技术领域

本发明涉及互联网应用技术领域，特别涉及一种图片展示方法及装置。

背景技术

目前，在一些应用中，通过将多张用户分享的同一场景或地理位置的图片(如用户在旅游景点拍摄的照片等)进行展示，以提升用户分享的图片之间的关联度，从而增强用户体验。

然而，目前在获取用户上传的图片之后，这些图片通常以列表或图标的形式进行展示，用户需要通过点击或滑动操作进行图片的切换展示，展现形式较单一，并且操作较繁琐。因而，亟待解决这一问题。

发明内容

本发明提供一种图片展示方法及装置，用以实现以图片墙的布局展示图片的目的。

本发明提供一种图片展示方法，包括：

获得在web页面上展示图片的触发；

根据所述触发调用预设的图片墙展示插件；

将待展示图片加载到所述图片墙展示插件中；

利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片。

在本发明一实施例中，所述图片墙展示插件内设置有至少一个图片布局模板，利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片，包括：

从所述至少一个图片布局模板中选取一图片布局模板；

将加载后的图片放置在选取的所述图片布局模板中，生成图片墙在所述web页面上进行展示。

在本发明一实施例中，将加载后的图片放置在选取的所述图片布局模板中，包括：

获取加载后的图片的编号；

根据所述编号，将加载后的图片对应放置在选取的所述图片布局模板中。

在本发明一实施例中，所述方法还包括：

获取加载后的图片的尺寸；

在将加载后的图片放置在选取的所述图片布局模板中时，若图片的尺寸与所述图片布局模板中模板元素的尺寸不适配，则调整该图片的尺寸，以适配该模板元素的尺寸。

在本发明一实施例中，所述图片布局模板中模板元素包含图片图层和相框图层，将加载后的图片放置在选取的所述图片布局模板中，包括：

将加载后的图片放置在选取的所述图片布局模板中的图片图层，并与相框图层叠加。

在本发明一实施例中，所述方法还包括：

当需要在所述web页面上同时展示多个图片布局模板各自生成的图片墙时，确定各个图片布局模板生成的图片墙对应的时间点；

通过时间轴的方式在所述web页面上同时展示各个图片布局模板生成的图片墙。

本发明还提供一种图片展示装置，包括：

获取模块，用于获得在web页面上展示图片的触发；

调用模块，用于根据所述触发调用预设的图片墙展示插件；

加载模块，用于将待展示图片加载到所述图片墙展示插件中；

展示模块，用于利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片。

在本发明一实施例中，所述图片墙展示插件内设置有至少一个图片布局模板，所述展示模块包括：

选取单元，用于从所述至少一个图片布局模板中选取一图片布局模板；

展示单元，用于将加载后的图片放置在选取的所述图片布局模板中，生成图片墙在所述web页面上进行展示。

在本发明一实施例中，所述展示单元还用于：

获取加载后的图片的编号；

根据所述编号，将加载后的图片对应放置在选取的所述图片布局模板中。

在本发明一实施例中，所述展示单元还用于：

获取加载后的图片的尺寸；

在将加载后的图片放置在选取的所述图片布局模板中时，若图片的尺寸与所述图片布局模板中模板元素的尺寸不适配，则调整该图片的尺寸，以适配该模板元素的尺寸。

本发明实施例的一些有益效果可以包括：

本发明实施例中，获得在web页面上展示图片的触发，根据该触发调用预设的图片墙展示插件，随后将待展示图片加载到图片墙展示插件中，进而利用图片墙展示插件，在web页面上以图片墙的布局展示加载后的图片。由此可知，本发明实施例利用图片墙展示插件实现了以图片墙的布局展示图片的目的。由于图片墙能够充分展示图片，因而用户无需通过点击或滑动操作进行图片的切换展示，使得图片展示更加灵活直观。

此外，本发明实施例中还可以以时间轴的方式展示图片墙，方便用户根据时间点查询图片，能够提高查询速度，为用户提供更好的展示体验。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

下面通过附图和实施例，对本发明的技术方案做进一步的详细描述。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1所示为本发明一实施例中图片展示方法的流程图；

图2所示为本发明一实施例中以时间轴展示图片墙的示意图；

图3所示为本发明另一实施例中图片展示方法的流程图；

图4所示为本发明一实施例中图片展示装置的结构示意图；以及

图5所示为本发明一实施例中展示模块44的结构示意图。

具体实施方式

以下结合附图对本发明的优选实施例进行说明，应当理解，此处所描述的优选实施例仅用于说明和解释本发明，并不用于限定本发明。

图1所示为本发明一实施例中图片展示方法的流程图，该方法包括以下步骤S11-S14：

步骤S11，获得在web页面上展示图片的触发。

该步骤中，可以在web(网络)页面上设置展示图片的入口，当该入口被点击或双击时，获得在web页面上展示图片的触发。或者，还可以结合物理按键来实现，例如，当终端处于web页面上时，当接收到连续敲击键盘上的空格两次的操作指令时，则获得在web页面上展示图片的触发。当然，还可以通过其他方式获得该触发。

步骤S12，根据该触发调用预设的图片墙展示插件。

步骤S13，将待展示图片加载到图片墙展示插件中。

步骤S14，利用图片墙展示插件，在web页面上以图片墙的布局展示加载后的图片。

本发明实施例中，获得在web页面上展示图片的触发，根据该触发调用预设的图片墙展示插件，随后将待展示图片加载到图片墙展示插件中，进而利用图片墙展示插件，在web页面上以图片墙的布局展示加载后的图片。由此可知，本发明实施例利用图片墙展示插件实现了以图片墙的布局展示图片的目的。由于图片墙能够充分展示图片，因而用户无需通过点击或滑动操作进行图片的切换展示，使得图片展示更加灵活直观。

在本发明一实施例中，图片墙展示插件内设置有至少一个图片布局模板，每个图片布局模板定义了模板元素(即图片)的尺寸、模板元素之间的位置关系、模板元素的边框的边缘到背景边缘的距离等等。

在本发明的另一实施例中，每个图片布局模板中的模板元素，即图片，可以采用DIV来实现。DIV元素是用来为HTML(HypertextMarkupLanguage，超文本标记语言)文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

此时，上文步骤S14可以实施为以下步骤A1-A2：

步骤A1，从至少一个图片布局模板中选取一图片布局模板。

该步骤中，可以根据用户的选取操作，从至少一个图片布局模板中选取一图片布局模板。也可以根据待展示图片的类型，从至少一个图片布局模板中匹配到一图片布局模板，例如，将待展示图片的类型与图片布局模板的名称进行匹配等。

步骤A2，将加载后的图片放置在选取的图片布局模板中，生成图片墙在web页面上进行展示。

该步骤中，可以将加载后的图片的地址放置在选取的图片布局模板中，在后续展示的时候根据地址获取图片，这样可以节约系统存储资源。

进一步，可以获取加载后的图片的编号，进而根据这些编号，将加载后的图片对应放置在选取的图片布局模板中。例如，在将待展示图片加载到图片墙展示插件时，用户选取的顺序就形成了编号，则将待展示图片加载到图片墙展示插件之后，可以按照图片的编号对应放置在选取的图片布局模板中。

在本发明的又一实施例中，图片布局模板中模板元素包含图片图层和相框图层，则将加载后的图片放置在选取的图片布局模板中的图片图层，并与相框图层叠加进行展示，从而使得图片墙展示更加逼真，实现更好的展示效果。

此外，在将加载后的图片放置在选取的图片布局模板中时，若图片的尺寸与图片布局模板中模板元素的尺寸不适配，则可以调整该图片的尺寸，以适配该模板元素的尺寸，也就是说，使得该图片能够填充满整个图片图层。

在本发明的再一实施例中，当需要在web页面上同时展示多个图片布局模板各自生成的图片墙时，可以确定各个图片布局模板生成的图片墙对应的时间点，通过时间轴的方式在web页面上同时展示各个图片布局模板生成的图片墙。本发明实施例中，时间轴从低到高可以包括秒、分、时、日、月、年、十年和百年这些层级，当然也可以根据实际需求进行划分，本发明不作限制。例如，以年份为时间轴的图片墙展示方式，如图2所示。

下面通过一具体实施例详细介绍本发明的图片展示方法的实现过程。

图3所示为本发明另一实施例中图片展示方法的流程图，该方法包括以下步骤S31-S35：

步骤S31，获得在web页面上展示图片的触发。

步骤S32，根据该触发调用预设的图片墙展示插件。

该步骤中，预设的图片墙展示插件可以使用jquery插件编写规范，调用图片墙展示插件提供的参数如下：

步骤S33，将待展示图片加载到图片墙展示插件中。

步骤S34，从图片墙展示插件内设置的至少一个图片布局模板中选取一图片布局模板。

步骤S35，获取加载后的图片的编号。

步骤S36，根据加载后的图片的编号，将加载后的图片对应放置在选取的图片布局模板中，生成图片墙在web页面上进行展示。

这里，生成图片墙时可以根据上述调用参数，进行html的绘制。首先，获取当前对象的位置，并计算图片缩小比例系数。随后，根据不同显示视图需求，定位不同的图片布局模板和尺寸。接着，根据缩放比例，计算图片的真实尺寸。最后，遍历layout(图片布局模板)数据，拼接html。

该步骤中，将加载后的图片放置在选取的所述图片布局模板中的图片图层，并与相框图层叠加，从而使得图片墙展示更加逼真，实现更好的展示效果。

另外，在将加载后的图片放置在选取的图片布局模板中时，若图片的尺寸与图片布局模板中模板元素的尺寸不适配，则可以调整该图片的尺寸，以适配该模板元素的尺寸，也就是说，使得该图片能够填充满整个图片图层。

对应于上述实施例中的图片展示方法，本发明还提供一种图片展示装置。如图4所示为本发明一实施例中图片展示装置的结构示意图，包括：

获取模块41，用于获得在web页面上展示图片的触发；

调用模块42，用于根据所述触发调用预设的图片墙展示插件；

加载模块43，用于将待展示图片加载到所述图片墙展示插件中；

展示模块44，用于利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片。

在本发明一实施例中，可以在web(网络)页面上设置展示图片的入口，当该入口被点击或双击时，获取模块41获得在web页面上展示图片的触发。或者，还可以结合物理按键来实现，例如，当终端处于web页面上时，当接收到连续敲击键盘上的空格两次的操作指令时，则获取模块41获得在web页面上展示图片的触发。当然，获取模块41还可以通过其他方式获得该触发。

在本发明一实施例中，所述图片墙展示插件内设置有至少一个图片布局模板，如图5所示，上述展示模块44可以包括：

选取单元51，用于从所述至少一个图片布局模板中选取一图片布局模板；

展示单元52，用于将加载后的图片放置在选取的所述图片布局模板中，生成图片墙在所述web页面上进行展示。

这里，选取单元51可以根据用户的选取操作，从至少一个图片布局模板中选取一图片布局模板。选取单元51也可以根据待展示图片的类型，从至少一个图片布局模板中匹配到一图片布局模板，例如，将待展示图片的类型与图片布局模板的名称进行匹配等。

在本发明一实施例中，上述展示单元52还用于：

获取加载后的图片的编号；

根据所述编号，将加载后的图片对应放置在选取的所述图片布局模板中。

在本发明一实施例中，上述展示单元52还用于：

获取加载后的图片的尺寸；

在将加载后的图片放置在选取的所述图片布局模板中时，若图片的尺寸与所述图片布局模板中模板元素的尺寸不适配，则调整该图片的尺寸，以适配该模板元素的尺寸。

在本发明一实施例中，上述展示单元52还用于：

当需要在所述web页面上同时展示多个图片布局模板各自生成的图片墙时，确定各个图片布局模板生成的图片墙对应的时间点；

通过时间轴的方式在所述web页面上同时展示各个图片布局模板生成的图片墙。

本发明实施例的上述装置：获得在web页面上展示图片的触发，根据该触发调用预设的图片墙展示插件，随后将待展示图片加载到图片墙展示插件中，进而利用图片墙展示插件，在web页面上以图片墙的布局展示加载后的图片。由此可知，本发明实施例利用图片墙展示插件实现了以图片墙的布局展示图片的目的。由于图片墙能够充分展示图片，因而用户无需通过点击或滑动操作进行图片的切换展示，使得图片展示更加灵活直观。

此外，本发明实施例中还可以以时间轴的方式展示图片墙，方便用户根据时间点查询图片，能够提高查询速度，为用户提供更好的展示体验。

本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器和光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种图片展示方法，其特征在于，包括：

获得在web页面上展示图片的触发；

根据所述触发调用预设的图片墙展示插件；

将待展示图片加载到所述图片墙展示插件中；

利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片。

2.根据权利要求1所述的方法，其特征在于，所述图片墙展示插件内设置有至少一个图片布局模板，利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片，包括：

从所述至少一个图片布局模板中选取一图片布局模板；

将加载后的图片放置在选取的所述图片布局模板中，生成图片墙在所述web页面上进行展示。

3.根据权利要求2所述的方法，其特征在于，将加载后的图片放置在选取的所述图片布局模板中，包括：

获取加载后的图片的编号；

根据所述编号，将加载后的图片对应放置在选取的所述图片布局模板中。

4.根据权利要求2或3所述的方法，其特征在于，还包括：

获取加载后的图片的尺寸；

在将加载后的图片放置在选取的所述图片布局模板中时，若图片的尺寸与所述图片布局模板中模板元素的尺寸不适配，则调整该图片的尺寸，以适配该模板元素的尺寸。

5.根据权利要求4所述的方法，其特征在于，所述图片布局模板中模板元素包含图片图层和相框图层，将加载后的图片放置在选取的所述图片布局模板中，包括：

将加载后的图片放置在选取的所述图片布局模板中的图片图层，并与相框图层叠加。

6.根据权利要求1所述的方法，其特征在于，还包括：

当需要在所述web页面上同时展示多个图片布局模板各自生成的图片墙时，确定各个图片布局模板生成的图片墙对应的时间点；

通过时间轴的方式在所述web页面上同时展示各个图片布局模板生成的图片墙。

7.一种图片展示装置，其特征在于，包括：

获取模块，用于获得在web页面上展示图片的触发；

调用模块，用于根据所述触发调用预设的图片墙展示插件；

加载模块，用于将待展示图片加载到所述图片墙展示插件中；

展示模块，用于利用所述图片墙展示插件，在所述web页面上以图片墙的布局展示加载后的图片。

8.根据权利要求7所述的装置，其特征在于，所述图片墙展示插件内设置有至少一个图片布局模板，所述展示模块包括：

选取单元，用于从所述至少一个图片布局模板中选取一图片布局模板；

展示单元，用于将加载后的图片放置在选取的所述图片布局模板中，生成图片墙在所述web页面上进行展示。

9.根据权利要求8所述的装置，其特征在于，所述展示单元还用于：

获取加载后的图片的编号；

根据所述编号，将加载后的图片对应放置在选取的所述图片布局模板中。

10.根据权利要求8或9所述的装置，其特征在于，所述展示单元还用于：

获取加载后的图片的尺寸；

在将加载后的图片放置在选取的所述图片布局模板中时，若图片的尺寸与所述图片布局模板中模板元素的尺寸不适配，则调整该图片的尺寸，以适配该模板元素的尺寸。