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

Abstract

本发明实施例提供了一种图片展示方法及装置，所述方法包括：获得n列容器；获得每一容器列的高度，将所获得高度中的最大值作为第一高度；针对每一目标容器列，根据该目标容器列的高度与第一高度的差值，确定该目标容器列内每一容器的高度增加值，并根据该目标容器列内每一容器的高度增加值，调整该目标容器列内每一容器的纵向坐标以及每一容器的高度；针对每一容器列，根据第二高度、该容器列的高度占第二高度的比例、预设的容器间隙、列数n及展示界面宽度，调整该容器列内各容器的宽度；在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片。通过实施本方法提供的方案，可以美化图片的展示效果。

Description

一种图片展示方法及装置

技术领域

本发明涉及计算机技术领域，特别是涉及一种图片展示方法及装置。

背景技术

展示多张大小不一的图片之前，需要确定每一图片对应的容器的大小及容器在展示界面上的位置，也就是容器在展示界面上的布局。现有技术中通常采用瀑布流布局方法完成上述布局。瀑布流布局方法为，按照由上至下的顺序将多张图片的容器在固定区域内排成多列的布局方法。

现有瀑布流布局方法按照各列等宽原则布局图片之后展示图片，具体包括如下步骤：根据展示界面宽度、预设列数n以及预设容器间隙，确定各图片所对应容器的目标宽度；针对每一容器，根据目标宽度以及该容器对应图片的宽高比，确定该容器的目标高度；将容器分为n组，使各组内容器的目标高度之和相差最小值，其中，目标高度之和为每一组内所包括容器的目标高度的和；将同一组内容器放至同一列内以完成布局，最后在各个容器内展示其所对应的图片。

现有瀑布流布局方法中，n个组别对应n列，n个组别之间的目标高度之和相差最小值，能够使得显示后的各列的高度差相差最小。但是，通常情况下最小值不为“0”，这意味着显示后的各列容器存在高度差，如图1所示，使得显示后的图片不规整，导致图片的展示效果差的问题。

发明内容

本发明实施例的目的在于提供一种图片展示方法及装置，以美化图片的展示效果。具体技术方案如下：

第一方面，本发明实施例提供了一种图片展示方法，所述方法包括：

获得n列容器，其中，所述n为预先设置的容器列数，所述n列容器中任一列内各容器的原始宽度相等；

获得每一容器列的高度，并将所获得高度中的最大值作为第一高度；

针对每一目标容器列，根据该目标容器列的高度与所述第一高度的差值，确定该目标容器列内每一容器的高度增加值，并根据该目标容器列内每一容器的高度增加值，调整该目标容器列内每一容器的纵向坐标以及每一容器的高度，其中，目标容器列为：n列容器列中除所述第一高度所对应的容器列以外的每一容器列；

针对每一容器列，根据第二高度、该容器列的高度占所述第二高度的比例、预设的容器间隙、列数n以及展示界面宽度，调整该容器列内各容器的宽度，其中，所述第二高度为所述n列容器的高度总和；

根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标；

在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片。

可选的，所述针对每一目标容器列，根据该容器列的高度与所述第一高度的差值，确定该容器列内每一容器的高度增加值的步骤，包括：

根据以下公式，确定每一目标容器列内每一容器的高度增加值Δy：

其中，Δh为一目标容器列的高度与所述第一高度的差值，n为该目标容器列的容器数量。

可选的，所述根据该容器列内每一容器的高度增加值，调整该容器列内每一容器的纵向坐标的步骤，包括：

根据以下公式，调整该容器列内每一目标容器的纵向坐标：

y′＝y+(p-1)Δy，其中，y′为目标容器调整后的纵向坐标，y为所述目标容器调整前的纵向坐标，Δy为所述目标容器的高度增加值，p为所述目标容器在其所在容器列中由上至下的序号。

可选的，所述针对每一容器列，根据第二高度、该容器列的高度占所述第二高度的比例、预设的容器间隙、列数n以及展示界面宽度，调整该容器列内各容器的宽度的步骤，包括：

根据以下公式，调整每一容器列内每一容器的宽度：

其中，w为一容器调整后的宽度，h为该容器所在容器列的高度，h_a为所述第二高度，W为展示界面宽度，s为预设的容器间隙。

可选的，所述根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标的步骤，包括：

根据以下公式，调整每一容器的横向坐标：

其中，x为一容器的调整后的横向坐标，i为该容器所在容器列在所述n列容器中由左至右的目标序号，w_c为序号为c的容器列内容器的宽度。

可选的，所述在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片的步骤，包括：

通过以下方式对每一容器对应的图片进行调整，并在该容器内展示调整后的图片：

根据参考容器对应的目标图片的高度以及第一缩放比，计算所述目标图片的调整后高度，其中，所述第一缩放比为所述目标图片的宽度与所述参考容器的宽度的比例，所述参考容器为任一容器；

判断计算得到的调整后高度是否大于所述参考容器的高度；

若为是，将所述目标图片的宽度调整为所述参考容器的宽度，将所述目标图片的高度调整为计算得到的调整后高度，在所述参考容器中展示调整后的目标图片；

若为否，将所述目标图片的高度调整至所述参考容器的高度，根据所述目标图片的宽度以及第二缩放比，计算所述目标图片的调整后宽度，并将所述目标图片的宽度调整至计算得到的调整后宽度，在所述参考容器中展示调整后的目标图片，其中，所述第二缩放比为所述目标图片的高度与所述参考容器的高度的比例。

可选的，在获得每一容器列的高度的步骤之后，所述方法还包括：

判断n个容器列的高度是否在预设范围内波动，若为是，执行将所获得高度中的最大值作为第一高度的步骤。

第二方面，本发明实施例提供了一种图片展示装置，所述装置包括：

第一获得模块，用于获得n列容器，其中，所述n为预先设置的容器列数，所述n列容器中任一列内各容器的原始宽度相等；

第二获得模块，用于获得每一容器列的高度，并将所获得高度中的最大值作为第一高度；

第一调整模块，用于针对每一目标容器列，根据该目标容器列的高度与所述第一高度的差值，确定该目标容器列内每一容器的高度增加值，并根据该目标容器列内每一容器的高度增加值，调整该目标容器列内每一容器的纵向坐标以及每一容器的高度，其中，目标容器列为：n列容器列中除所述第一高度所对应的容器列以外的每一容器列；

第二调整模块，用于针对每一容器列，根据第二高度、该容器列的高度占所述第二高度的比例、预设的容器间隙、列数n以及展示界面宽度，调整该容器列内各容器的宽度，其中，所述第二高度为所述n列容器的高度总和；

第三调整模块，用于根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标；

展示模块，用于在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片。

可选的，所述第一调整模块，具体用于：

根据以下公式，确定每一目标容器列内每一容器的高度增加值Δy：

其中，Δh为一目标容器列的高度与所述第一高度的差值，n为该目标容器列的容器数量。

可选的，所述第一调整模块，具体用于：

根据以下公式，调整该容器列内每一目标容器的纵向坐标：

y′＝y+(p-1)Δy，其中，y′为目标容器调整后的纵向坐标，y为所述目标容器调整前的纵向坐标，Δy为所述目标容器的高度增加值，p为所述目标容器在其所在容器列中由上至下的序号。

可选的，所述第二调整模块，具体用于：

根据以下公式，调整每一容器列内每一容器的宽度：

其中，w为一容器调整后的宽度，h为该容器所在容器列的高度，h_a为所述第二高度，W为展示界面宽度，s为预设的容器间隙。

可选的，所述第三调整模块，具体用于：

根据以下公式，调整每一容器的横向坐标：

其中，x为一容器的调整后的横向坐标，i为该容器所在容器列在所述n列容器中由左至右的目标序号，w_c为序号为c的容器列内容器的宽度。

可选的，所述展示模块，包括：计算子模块、判断子模块、第一调整子模块和第二调整子模块；

所述展示模块，具体用于通过所述计算子模块、判断子模块、第一调整子模块和第二调整子模块对每一容器对应的图片进行调整，并在该容器内展示调整后的图片；

所述计算子模块，用于根据参考容器对应的目标图片的高度以及第一缩放比，计算所述目标图片的调整后高度，其中，所述第一缩放比为所述目标图片的宽度与所述参考容器的宽度的比例，所述参考容器为任一容器；

所述判断子模块，用于判断计算得到的调整后高度是否大于所述参考容器的高度；若为是，触发所述第一调整子模块；若为否，触发所述第二调整子模块；

所述第一调整子模块，用于将所述目标图片的宽度调整为所述参考容器的宽度，将所述目标图片的高度调整为计算得到的调整后高度，在所述参考容器中展示调整后的目标图片；

所述第二调整子模块，用于将所述目标图片的高度调整至所述参考容器的高度，根据所述目标图片的宽度以及第二缩放比，计算所述目标图片的调整后宽度，并将所述目标图片的宽度调整至计算得到的调整后宽度，在所述参考容器中展示调整后的目标图片，其中，所述第二缩放比为所述目标图片的高度与所述参考容器的高度的比例。

可选的，所述装置还包括：

判断模块，用于判断n个容器列的高度是否在预设范围内波动，若为是，触发所述第二获得模块。

本发明实施例提供的一种图片展示方法及装置，将不等高的n列容器中的每一容器列调整为第一高度，使得各容器列的高度相等，进而使n列容器的排列相对于现有技术中容器的排列较为规整，进而使得所展示出的图片较为规整，美化了图片的展示效果。

附图说明

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

图1为按照各列等宽原则的瀑布流布局方式布局后的展示效果图；

图2为本发明实施例所提供的一种图片展示方法的步骤流程图；

图3为现有技术的展示效果图与本发明实施例所提供的图片展示方法的展示效果图的对比图；

图4为本发明实施例所提供的一种图片展示装置的结构示意图。

具体实施方式

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

本发明实施例提供了一种图片展示方法及装置，以下分别做详细介绍。

本发明实施例提供的一种图片展示方法可以应用于电子设备，该电子设备可以为笔记本、平板电脑、台式计算机、智能手机等。具体的，本发明实施例所提供的图片展示方法应用于运行在电子设备上的客户端软件，该软件可以为专门的图片浏览器；进一步的，该方法还可以应用在客户端软件的功能插件上，例如网页浏览器的功能插件、照相机的功能插件、图像处理器的功能插件等。

如图2所示，本发明实施例所提供的一种图片展示方法，包括如下步骤：

S201：获得n列容器，其中，所述n为预先设置的容器列数，所述n列容器中任一列内各容器的原始宽度相等；

n列容器中的各容器列高度可能会不相等，为了使容器对应的图片的展示效果更加规整，需要调整各容器列的高度，因此，获得n列容器以进行调整。其中，容器列为n列容器中的任一列。本发明实施例中，不限定列数n的取值，例如，n的取值可以是2、3、4等等。本发明实施例中的容器为用于显示图片的组件。

在一种实现方式中，所获得的n列容器可以是采用各列等宽原则的瀑布流布局的方式生成的，当然还可以以其他方式生成，本发明实施例不做具体限定。

需要说明的是，所获得的n列容器中任一列内各容器的原始宽度相等，也就是说，在同一个容器列中的容器的宽度相等。不同容器列中容器的宽度可以相等也可以不相等，本发明实施例不对此进行限定。

可选的，当不同容器列中的容器宽度相等时，每一列的宽度可以为w_e：

其中，W为展示界面宽度，s为预设的容器间隙。相应地，n列容器等宽时，各容器的高度可以为h_e：

其中，h_p为容器对应的图片的高度，w_p为容器对应的图片的宽度。

可选的，生成n列容器时，在确定n列容器中每一列内所包含的容器的过程中，可以采用动态规划分组的方式，以使每一组内容器的高度之和与其他组的容器高度之和相差最小值，将同一组内的容器确定为同一列容器；较佳的，为了简化n列容器的生成过程，还可以将未确定所属列的容器插入到列高最小的容器列中，以确定每列中所包含的容器。

S202：获得每一容器列的高度，并将所获得高度中的最大值作为第一高度；

在获得n列容器后，计算各容器列高度并进行比较，进而获得最高的容器列的高度。

具体的，每一容器列的高度可以为该容器列中所有容器的高度与该容器列中相邻两容器之间的间隙之和。因此，可以通过各容器列所含容器的高度以及预设的容器间隙，获得每一容器列的高度。

在一种可选实施方式中，容器通常为规矩的矩形形状，因此可以通过计算容器列最顶层容器的左上角纵坐标和最底层容器的左下角纵坐标之间的差值，获得容器列的高度。

可选的，可以将各容器列的高度两两比较，选取较高值作为第一高度，进而获得第一高度，即最高的容器列的高度。

S203：针对每一目标容器列，根据该目标容器列的高度与所述第一高度的差值，确定该目标容器列内每一容器的高度增加值，并根据该目标容器列内每一目标容器的高度增加值，调整该目标容器列内每一容器的纵向坐标以及每一容器的高度，其中，目标容器列为：n列容器列中除所述第一高度所对应的容器列以外的每一容器列；

获得第一高度后，需要将其余各容器列的高度调整为第一高度，因此需要计算每一容器列高度与第一高度的差值，以得知每一容器列的调整量，进而得知该容器列中各容器的高度增加值。

对于一个容器列而言，该容器列内不同容器的高度增加值可以相等，也可以不相等，以下分别进行详细说明。

当同一容器列中各容器的高度增加值相等时，可选的，根据以下公式，确定每一目标容器列内每一容器的高度增加值Δy：

其中，Δh为一目标容器列的高度与所述第一高度的差值，n为该目标容器列的容器数量。

当同一容器列中各容器的高度增加值不相等时，可选的，根据每一容器的高度占该容器所在列中所有容器的高度之和的比例，计算该容器的高度增加值。

获得高度增加值之后，根据容器对应的高度增加值增加各容器的高度。

由于容器的高度发生了改变，因此需要调整各容器的纵向坐标。在一种可选实施例中，同一容器列中每一容器改变的高度相同，因此根据每一容器列的高度增加值调整该列内每一容器的纵向坐标。可选的，根据以下公式，调整该容器列内每一目标容器的纵向坐标：y′＝y+(p-1)Δy，其中，y′为目标容器调整后的纵向坐标，y为所述目标容器调整前的纵向坐标，Δy为所述目标容器的高度增加值，p为所述目标容器在其所在容器列中由上至下的序号。

可选的，调整容器的纵向坐标的方式可以为：首先调整容器的参考点的纵坐标，然后调整容器其他点的纵坐标。本发明实施例中，参考点可以为容器的任一点，例如，容器的左上角顶点。

S204：针对每一容器列，根据第二高度、该容器列的高度占所述第二高度的比例、预设的容器间隙、列数n以及展示界面宽度，调整该容器列内各容器的宽度，其中，所述第二高度为所述n列容器的高度总和；

将需要调整高度的各容器高度增加后，需要调整容器的宽度，且为了提高容器的规整程度，将处于同一容器列内的容器的宽度调整至同一数值。由于展示界面的总宽度有限，对于高度增加了的容器，不能将其宽度也增加相应值。因此，根据每一容器列的高度占n个容器列的总高度的比例，决定每一容器列的调整后宽度，且将高度较矮的容器列的调整后宽度调整至较宽值。

具体的，可以根据以下公式，调整每一容器列内每一容器的宽度：

其中，w为一容器调整后的宽度，h为该容器所在容器列的高度，h_a为所述第二高度，W为展示界面宽度，s为预设的容器间隙。

S205：根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标；

由于各容器列中容器的宽度发生了改变，因此，需要调整各容器列内每一容器的横向坐标。

在一种可选实施方式中，根据当前所调整容器列左边的容器列对应容器的调整后宽度，确定该容器列内每一容器的横向坐标。

具体的，根据以下公式，调整每一容器的横向坐标：

其中，x为一容器的调整后的横向坐标，i为该容器所在容器列在所述n列容器中由左至右的目标序号，w_c为序号为c的容器列内容器的宽度。

在一种可选实施例中，调整容器的横向坐标的方式可以为：首先调整容器参考点的横坐标，然后调整容器其他点的横坐标。可选的，容器的参考点可以为容器的任一点，例如，左上角顶点。

S206：在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片。

调整好容器的宽高、确定好容器的位置后，对容器对应的图片进行展示。

由于容器的宽高发生了变化，为了使图片的尺寸接近于调整后容器的尺寸，较佳的，对容器对应的图片的宽高进行调整。

可选的，通过以下方式调整图片：

根据参考容器对应的目标图片的高度以及第一缩放比，计算所述目标图片的调整后高度，其中，所述第一缩放比为所述目标图片的宽度与所述参考容器的宽度的比例，所述参考容器为任一容器；

判断计算得到的调整后高度是否大于所述参考容器的高度；

若为是，将所述目标图片的宽度调整为所述参考容器的宽度，将所述目标图片的高度调整为计算得到的调整后高度，在所述参考容器中展示调整后的目标图片；

若为否，将所述目标图片的高度调整至所述参考容器的高度，根据所述目标图片的宽度以及第二缩放比，计算所述目标图片的调整后宽度，并将所述目标图片的宽度调整至计算得到的调整后宽度，在所述参考容器中展示调整后的目标图片，其中，所述第二缩放比为所述目标图片的高度与所述参考容器的高度的比例。

可选的，可以通过以下公式计算目标图片的调整后高度a′：

其中，

为第一缩放比，b为上述目标图片的宽度，m为上述目标图片对应的容器的宽度，a为目标图片的高度。

可选的，可以通过以下公式计算目标图片的调整后宽度b′：

其中，n上述目标图片对应的容器的高度。

本发明实施例提供的一种图片展示方法，将不等高的n列容器中的每一容器列调整为第一高度，使得各容器列的高度相等，进而使n列容器的排列相对于现有技术中容器的排列较为规整，进而使得所展示出的图片较为规整，美化了图片的展示效果。

可以理解的是，各容器列内容器的高度增加值的大小主要取决于各容器列高度与最高容器列的高度的差值，当上述差值大，容器列内各容器高度增加得较多，相反，各容器的高度增加较少。为了使各容器的高度增加量符合预设条件，本发明实施还包括：

判断n个容器列的高度是否在预设范围内波动，若为是，执行将所获得高度中的最大值作为第一高度的步骤。

可选的，可以将预设范围设定为较小值，当n个容器列的高度在较小的范围内波动时，各容器列与高度最高的容器列的高度之差可以被控制在较小范围，进而使得各容器的高度增加值较小，这有助于保证所显示图片的规整度的同时，使调整后容器的宽高接近于图片尺寸。

为了更加清楚的介绍本发明实施例所提供的图片展示方法，以下举例做详细说明。

假设获得如图1所示的等宽的2列容器，图1中的数字1-5分别代表5个容器，容器1、容器3、容器5组成一个容器列A，容器2、容器4组成另一个容器列B。经计算，可以得知容器列A为两列中最高的容器列，进而需要将容器列B调整至容器列A的高度。具体为，计算A、B两容器列的高度差值，并将上述差值除以B列中的容器个数，即除以2，获得容器2、容器4的高度增加值，并将容器2、容器4的高度增加相应数值。由于容器2的高度增加，因此将容器4的参考点的纵坐标增加。由于B列内的容器的高度增加，为了保证B列内容器的宽高比变化最小，因此需要调整两列内容器的宽度。具体为，计算A列、B列两列高度总和，并分别获得A、B两列的高度占上述高度总和的比例，分别将上述两个比例与减去容器间隙后的展示宽度相乘，获得两个宽度值。可以理解到，其中一个宽度值小于当前宽度，另一个宽度值大于当前宽度。由于B列内容器的高度被调高，因此将B列内容器宽度调至大于当前宽度的宽度值，将A列内容器的宽度调至小于当前宽度的宽度值。然后，由于A列内容器的宽度改变，因此需要调整B列的容器的横坐标，具体可以将调整后A列容器的宽度与容器间隙相加，获得B列内容器2、容器4的横坐标。最后，在调整后的容器内展示相应图片，如图3所示。

相应于上述方法实施例，如图4所示，本发明实施例还提供了一种图片展示装置，所述装置包括：

第一获得模块410，用于获得n列容器，其中，所述n为预先设置的容器列数，所述n列容器中任一列内各容器的原始宽度相等；

第二获得模块420，用于获得每一容器列的高度，并将所获得高度中的最大值作为第一高度；

第一调整模块430，用于针对每一目标容器列，根据该目标容器列的高度与所述第一高度的差值，确定该目标容器列内每一容器的高度增加值，并根据该目标容器列内每一容器的高度增加值，调整该目标容器列内每一容器的纵向坐标以及每一容器的高度，其中，目标容器列为：n列容器列中除所述第一高度所对应的容器列以外的每一容器列；

第二调整模块440，用于针对每一容器列，根据第二高度、该容器列的高度占所述第二高度的比例、预设的容器间隙、列数n以及展示界面宽度，调整该容器列内各容器的宽度，其中，所述第二高度为所述n列容器的高度总和；

第三调整模块450，用于根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标；

展示模块460，用于在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片。

本发明实施例提供的一种图片展示装置，将不等高的n列容器中的每一容器列调整为第一高度，使得各容器列的高度相等，进而使n列容器的排列相对于现有技术中容器的排列较为规整，进而使得所展示出的图片较为规整，美化了图片的展示效果。

可选的，所述第一调整模块430，具体用于：

根据以下公式，确定每一目标容器列内每一容器的高度增加值Δy：

其中，Δh为一目标容器列的高度与所述第一高度的差值，n为该目标容器列的容器数量。

可选的，所述第一调整模块430，具体用于：

根据以下公式，调整该容器列内每一目标容器的纵向坐标：

y′＝y+(p-1)Δy，其中，y′为目标容器调整后的纵向坐标，y为所述目标容器调整前的纵向坐标，Δy为所述目标容器的高度增加值，p为所述目标容器在其所在容器列中由上至下的序号。

可选的，所述第二调整模块440，具体用于：

根据以下公式，调整每一容器列内每一容器的宽度：

其中，w为一容器调整后的宽度，h为该容器所在容器列的高度，h_a为所述第二高度，W为展示界面宽度，s为预设的容器间隙。

可选的，所述第三调整模块450，具体用于：

根据以下公式，调整每一容器的横向坐标：

其中，x为一容器的调整后的横向坐标，i为该容器所在容器列在所述n列容器中由左至右的目标序号，w_c为序号为c的容器列内容器的宽度。

可选的，所述展示模块460，包括：计算子模块、判断子模块、第一调整子模块和第二调整子模块；

所述展示模块，具体用于通过所述计算子模块、判断子模块、第一调整子模块和第二调整子模块对每一容器对应的图片进行调整，并在该容器内展示调整后的图片；

所述计算子模块，用于根据参考容器对应的目标图片的高度以及第一缩放比，计算所述目标图片的调整后高度，其中，所述第一缩放比为所述目标图片的宽度与所述参考容器的宽度的比例，所述参考容器为任一容器；

所述判断子模块，用于判断计算得到的调整后高度是否大于所述参考容器的高度；若为是，触发所述第一调整子模块；若为否，触发所述第二调整子模块；

所述第一调整子模块，用于将所述目标图片的宽度调整为所述参考容器的宽度，将所述目标图片的高度调整为计算得到的调整后高度，在所述参考容器中展示调整后的目标图片；

所述第二调整子模块，用于将所述目标图片的高度调整至所述参考容器的高度，根据所述目标图片的宽度以及第二缩放比，计算所述目标图片的调整后宽度，并将所述目标图片的宽度调整至计算得到的调整后宽度，在所述参考容器中展示调整后的目标图片，其中，所述第二缩放比为所述目标图片的高度与所述参考容器的高度的比例。

可选的，所述装置还包括：

判断模块，用于判断n个容器列的高度是否在预设范围内波动，若为是，触发所述第二获得模块420。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (14)

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

获得n列容器，其中，所述n为预先设置的容器列数，所述n列容器中任一列内各容器的原始宽度相等；

获得每一容器列的高度，并将所获得高度中的最大值作为第一高度；

针对每一目标容器列，根据该目标容器列的高度与所述第一高度的差值，确定该目标容器列内每一容器的高度增加值，并根据该目标容器列内每一容器的高度增加值，调整该目标容器列内每一容器的纵向坐标以及每一容器的高度，其中，目标容器列为：n列容器列中除所述第一高度所对应的容器列以外的每一容器列；

针对每一容器列，将其他容器列的高度占第二高度的比例，与所有容器的实际总宽度相乘，得到该容器列内每一容器调整后的宽度，其中，所述所有容器的实际总宽度为展示界面宽度与各容器列的预设容器间隙之间的差值，所述其他容器列占所述第二高度的比例是通过所述第二高度与该容器列的高度获得的，所述第二高度为所述n列容器的高度总和；

根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标；

在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片。

2.根据权利要求1所述的方法，其特征在于，所述针对每一目标容器列，根据该目标容器列的高度与所述第一高度的差值，确定该目标容器列内每一容器的高度增加值的步骤，包括：

根据以下公式，确定每一目标容器列内每一容器的高度增加值Δy：

其中，Δh为一目标容器列的高度与所述第一高度的差值，为该目标容器列的容器数量。

3.根据权利要求2所述的方法，其特征在于，所述根据该目标容器列内每一容器的高度增加值，调整该目标容器列内每一容器的纵向坐标的步骤，包括：

根据以下公式，调整该目标容器列内每一目标容器的纵向坐标：

y′＝y+(p-1)Δy，其中，y′为目标容器调整后的纵向坐标，y为所述目标容器调整前的纵向坐标，Δy为所述目标容器的高度增加值，p为所述目标容器在其所在容器列中由上至下的序号。

4.根据权利要求3所述的方法，其特征在于，所述针对每一容器列，将其他容器列的高度占所述第二高度的比例，与所有容器的实际总宽度相乘，得到该容器列内每个容器调整后的宽度的步骤，包括：

针对每一容器列，根据以下公式，得到该容器列内每一容器调整后的宽度：

其中，w为一容器调整后的宽度，h为该容器所在容器列的高度，h_a为所述第二高度，W为展示界面宽度，s为预设的容器间隙。

5.根据权利要求4所述的方法，其特征在于，所述根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标的步骤，包括：

根据以下公式，调整每一容器的横向坐标：

其中，x为一容器的调整后的横向坐标，i为该容器所在容器列在所述n列容器中由左至右的目标序号，w_c为序号为c的容器列内容器的宽度。

6.根据权利要求5所述的方法，其特征在于，所述在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片的步骤，包括：

通过以下方式对每一容器对应的图片进行调整，并在该容器内展示调整后的图片：

根据参考容器对应的目标图片的高度以及第一缩放比，计算所述目标图片的调整后高度，其中，所述第一缩放比为所述目标图片的宽度与所述参考容器的宽度的比例，所述参考容器为任一容器；

判断计算得到的调整后高度是否大于所述参考容器的高度；

若为是，将所述目标图片的宽度调整为所述参考容器的宽度，将所述目标图片的高度调整为计算得到的调整后高度，在所述参考容器中展示调整后的目标图片；

若为否，将所述目标图片的高度调整至所述参考容器的高度，根据所述目标图片的宽度以及第二缩放比，计算所述目标图片的调整后宽度，并将所述目标图片的宽度调整至计算得到的调整后宽度，在所述参考容器中展示调整后的目标图片，其中，所述第二缩放比为所述目标图片的高度与所述参考容器的高度的比例。

7.根据权利要求1-6中任一项所述的方法，其特征在于，在获得每一容器列的高度的步骤之后，所述方法还包括：

判断n个容器列的高度是否在预设范围内波动，若为是，执行将所获得高度中的最大值作为第一高度的步骤。

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

第一获得模块，用于获得n列容器，其中，所述n为预先设置的容器列数，所述n列容器中任一列内各容器的原始宽度相等；

第二获得模块，用于获得每一容器列的高度，并将所获得高度中的最大值作为第一高度；

第一调整模块，用于针对每一目标容器列，根据该目标容器列的高度与所述第一高度的差值，确定该目标容器列内每一容器的高度增加值，并根据该目标容器列内每一容器的高度增加值，调整该目标容器列内每一容器的纵向坐标以及每一容器的高度，其中，目标容器列为：n列容器列中除所述第一高度所对应的容器列以外的每一容器列；

第二调整模块，用于针对每一容器列，将其他容器列的高度占第二高度的比例，与所有容器的实际总宽度相乘，得到该容器列内每一容器调整后的宽度，其中，所述所有容器的实际总宽度为展示界面宽度与各容器列的预设容器间隙之间的差值，所述其他容器列占所述第二高度的比例是通过所述第二高度与该容器列的高度获得的，所述第二高度为所述n列容器的高度总和；

第三调整模块，用于根据预设容器间隙和调整后各个容器列内容器的宽度，调整每一容器列内容器的横向坐标；

展示模块，用于在调整高度、宽度、横向坐标以及纵向坐标后的各个容器中展示其对应的图片。

9.根据权利要求8所述的装置，其特征在于，所述第一调整模块，具体用于：

根据以下公式，确定每一目标容器列内每一容器的高度增加值Δy：

其中，Δh为一目标容器列的高度与所述第一高度的差值，a为该目标容器列的容器数量。

10.根据权利要求9所述的装置，其特征在于，所述第一调整模块，具体用于：

根据以下公式，调整该目标容器列内每一目标容器的纵向坐标：

y′＝y+(p-1)Δy，其中，y′为目标容器调整后的纵向坐标，y为所述目标容器调整前的纵向坐标，Δy为所述目标容器的高度增加值，p为所述目标容器在其所在容器列中由上至下的序号。

11.根据权利要求10所述的装置，其特征在于，所述第二调整模块，具体用于：

针对每一容器列，根据以下公式，得到该容器列内每一容器调整后的宽度：

其中，w为一容器调整后的宽度，h为该容器所在容器列的高度，h_a为所述第二高度，W为展示界面宽度，s为预设的容器间隙。

12.根据权利要求11所述的装置，其特征在于，所述第三调整模块，具体用于：

根据以下公式，调整每一容器的横向坐标：

其中，x为一容器的调整后的横向坐标，i为该容器所在容器列在所述n列容器中由左至右的目标序号，w_c为序号为c的容器列内容器的宽度。

13.根据权利要求12所述的装置，其特征在于，所述展示模块，包括：计算子模块、判断子模块、第一调整子模块和第二调整子模块；

所述展示模块，具体用于通过所述计算子模块、判断子模块、第一调整子模块和第二调整子模块对每一容器对应的图片进行调整，并在该容器内展示调整后的图片；

所述计算子模块，用于根据参考容器对应的目标图片的高度以及第一缩放比，计算所述目标图片的调整后高度，其中，所述第一缩放比为所述目标图片的宽度与所述参考容器的宽度的比例，所述参考容器为任一容器；

所述判断子模块，用于判断计算得到的调整后高度是否大于所述参考容器的高度；若为是，触发所述第一调整子模块；若为否，触发所述第二调整子模块；

所述第一调整子模块，用于将所述目标图片的宽度调整为所述参考容器的宽度，将所述目标图片的高度调整为计算得到的调整后高度，在所述参考容器中展示调整后的目标图片；

所述第二调整子模块，用于将所述目标图片的高度调整至所述参考容器的高度，根据所述目标图片的宽度以及第二缩放比，计算所述目标图片的调整后宽度，并将所述目标图片的宽度调整至计算得到的调整后宽度，在所述参考容器中展示调整后的目标图片，其中，所述第二缩放比为所述目标图片的高度与所述参考容器的高度的比例。

14.根据权利要求8-13中任一项所述的装置，其特征在于，所述装置还包括：

判断模块，用于判断n个容器列的高度是否在预设范围内波动，若为是，触发所述第二获得模块。

Images