卡片布局方法及装置、电子设备、存储介质与流程

本说明书一个或多个实施例涉及图像处理技术领域，尤其涉及一种卡片布局方法及装置、电子设备、存储介质。

背景技术：

区别于传统的表格式或者文本式呈现，数据可视化对于高维复杂场景有着更强的抽象能力，更易于理解。数据大盘/大屏都是数据可视化的典型应用场景，可以直观有效地表现出某一领域的趋势变化。在实际情况中，用户对于数据大盘的布局会随着关注维度重要性的变化而变化。

技术实现要素：

有鉴于此，本说明书一个或多个实施例提供一种卡片布局方法及装置、电子设备、存储介质。

为实现上述目的，本说明书一个或多个实施例提供技术方案如下：

根据本说明书一个或多个实施例的第一方面，提出了一种卡片布局方法，应用于显示设备，所述显示设备的显示界面中包含多个卡片；所述方法包括：

按照所述显示界面上的预设方向对所述显示界面上的卡片进行排序；

依次针对所述显示界面上的卡片执行解决碰撞操作；其中，针对任一卡片执行的解决碰撞操作包括：

确定与所述任一卡片发生碰撞的碰撞卡片；

按照所述预设方向将所述碰撞卡片移动至位于所述任一卡片之后，且与所述任一卡片不发生碰撞的空余位置。

可选的，所述按照所述显示界面上的预设方向对所述显示界面上的卡片进行排序，包括：

当所述显示界面中的卡片被移动时，将该被移动的卡片作为第一个卡片；

对在所述预设方向上位于该被移动的卡片之后的卡片进行排序。

可选的，所述按照所述显示界面上的预设方向对所述显示界面上的卡片进行排序，包括：

当监测到满足以下条件中至少之一时，按照所述预设方向对所述显示界面中的所有卡片进行排序：

所述显示界面的尺寸规格发生变化、所述显示界面中的卡片被放大、所述显示界面中的卡片被缩小。

可选的，在对所述显示界面上的卡片进行排序之前，所述方法还包括：

将所述显示界面上的卡片沿所述预设方向紧缩；

其中，任一卡片在发生碰撞或者边界与所述显示界面的边界重合的情况下停止紧缩。

可选的，所述按照所述预设方向将所述碰撞卡片移动至位于所述任一卡片之后，且与所述任一卡片不发生碰撞的空余位置，包括：

确定位于所述碰撞卡片之后且与所述碰撞卡片发生碰撞的障碍卡片；

按照所述预设方向将所述障碍卡片移动至特定位置，所述特定位置为不与移动至所述空余位置后的所述碰撞卡片发生碰撞的位置；

按照所述预设方向将所述碰撞卡片移动至所述空余位置。

可选的，所述确定位于所述碰撞卡片之后且与所述碰撞卡片发生碰撞的障碍卡片，包括：

按照所述预设方向遍历位于所述碰撞卡片之后的卡片；

当遍历过程中的当前卡片未与所述碰撞卡片发生碰撞时，停止遍历操作，并将位于所述当前卡片之前的卡片作为所述障碍卡片。

可选的，所述显示界面被按照预设数量的像素点为单位划分为若干栅格，所述显示界面上的卡片以所述栅格为单位进行移动。

可选的，当所述预设方向包括所述显示界面上的垂直方向时，在垂直方向上相同的卡片被按照水平方向进行排序，当所述预设方向包括所述显示界面上的水平方向时，在水平方向上相同的卡片被按照垂直方向进行排序。

可选的，还包括：

当监测到满足以下条件中至少之一时，调整各卡片承载的可视化元素以适应变化后卡片的宽高：

所述显示界面中的卡片被放大、所述显示界面中的卡片被缩小、所述显示界面的尺寸规格发生变化。

根据本说明书一个或多个实施例的第二方面，提出了一种卡片布局装置，应用于显示设备，所述显示设备的显示界面中包含多个卡片；所述装置包括：

排序单元，按照所述显示界面上的预设方向对所述显示界面上的卡片进行排序；

布局单元，依次针对所述显示界面上的卡片执行解决碰撞操作；其中，针对任一卡片执行的解决碰撞操作包括：

确定与所述任一卡片发生碰撞的碰撞卡片；

按照所述预设方向将所述碰撞卡片移动至位于所述任一卡片之后，且与所述任一卡片不发生碰撞的空余位置。

可选的，所述排序单元具体用于：

当所述显示界面中的卡片被移动时，将该被移动的卡片作为第一个卡片；

对在所述预设方向上位于该被移动的卡片之后的卡片进行排序。

可选的，所述排序单元具体用于：

当监测到满足以下条件中至少之一时，按照所述预设方向对所述显示界面中的所有卡片进行排序：

所述显示界面的尺寸规格发生变化、所述显示界面中的卡片被放大、所述显示界面中的卡片被缩小。

可选的，在对所述显示界面上的卡片进行排序之前，所述装置还包括：

紧缩单元，将所述显示界面上的卡片沿所述预设方向紧缩；

其中，任一卡片在发生碰撞或者边界与所述显示界面的边界重合的情况下停止紧缩。

可选的，所述布局单元具体用于：

确定位于所述碰撞卡片之后且与所述碰撞卡片发生碰撞的障碍卡片；

按照所述预设方向将所述障碍卡片移动至特定位置，所述特定位置为不与移动至所述空余位置后的所述碰撞卡片发生碰撞的位置；

按照所述预设方向将所述碰撞卡片移动至所述空余位置。

可选的，所述布局单元进一步用于：

按照所述预设方向遍历位于所述碰撞卡片之后的卡片；

当遍历过程中的当前卡片未与所述碰撞卡片发生碰撞时，停止遍历操作，并将位于所述当前卡片之前的卡片作为所述障碍卡片。

可选的，所述显示界面被按照预设数量的像素点为单位划分为若干栅格，所述显示界面上的卡片以所述栅格为单位进行移动。

可选的，当所述预设方向包括所述显示界面上的垂直方向时，在垂直方向上相同的卡片被按照水平方向进行排序，当所述预设方向包括所述显示界面上的水平方向时，在水平方向上相同的卡片被按照垂直方向进行排序。

可选的，还包括：

调整单元，当监测到满足以下条件中至少之一时，调整各卡片承载的可视化元素以适应变化后卡片的宽高：

所述显示界面中的卡片被放大、所述显示界面中的卡片被缩小、所述显示界面的尺寸规格发生变化。

根据本说明书一个或多个实施例的第三方面，提出了一种电子设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器通过运行所述可执行指令以实现如上述任一实施例中所述的卡片布局方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，其上存储有计算机指令，该指令被处理器执行时实现如上述实施例中任一所述的卡片布局方法的步骤。

附图说明

图1是一示例性实施例提供的一种卡片布局方法的流程图。

图2是一示例性实施例提供的另一种卡片布局方法的流程图。

图3是一示例性实施例提供的初始化屏幕坐标系的示意图。

图4-7是一示例性实施例提供的对卡片重新进行布局的示意图。

图8是一示例性实施例提供的一种设备的结构示意图。

图9是一示例性实施例提供的一种卡片布局装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。

需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。

请参见图1，图1是一示例性实施例提供的一种卡片布局方法的流程图。如图1所示，该方法可以包括以下步骤：

步骤102，按照所述显示界面上的预设方向对所述显示界面上的卡片进行排序。

在本实施例中，显示设备可通过在显示界面创建卡片来进行可视化展示。比如，数据大盘(也称数据大屏)可将一些业务的关键指标以数据可视化的方式展示。其中，卡片的卡片容器用于承载可视化元素，从而向用户进行数据可视化的展示。而在对显示界面中的卡片进行布局时，可基于单位栅格来定义显示界面。具体而言，可以预设数量的像素点为单位将显示界面划分为若干单位栅格，而基于单位栅格的划分，后续目标卡片集合中的卡片可按照单位栅格进行移动，即卡片在移动时以一个单位栅格作为最小移动距离。其中，单位栅格包含的像素点数量，可根据实际情况灵活设定。比如，当用户要求布局的精度较高，或者要求各个卡片之间的间距较紧凑时，可将较少数量的像素点为单位将显示界面划分为若干单位栅格。通过采用栅格取整计算可加快布局速度，提高拖放卡片的流畅度，同时布局系统坐标系的抽象使得布局信息可持久化。

同时，将显示界面中的卡片按照预设方向进行排序，从而后续可按照各卡片的序号遍历各个卡片以完成对卡片的布局。其中，预设方向包括垂直方向和/或水平方向。具体而言，在对卡片进行排序时，当预设方向包括垂直方向时，在垂直方向上相同的卡片被按照水平方向进行排序。例如，针对y轴坐标相同的卡片，按照从左到右(或者从右到左)的顺序进行排序。类似的，当预设方向包括水平方向时，在水平方向上相同的卡片被按照垂直方向进行排序。例如，针对x轴坐标相同的卡片，按照从上到下(或者从下到上)的顺序进行排序。需要注意的是，在对显示界面中的卡片进行布局时，垂直方向和水平方向的原理相同，因此在布局时可同时针对垂直方向和水平方向进行卡片的移动，进而完成显示界面中卡片位置的调整，保证各个卡片之间不发生碰撞。

在一种情况下，用户在不同时期对于不同维度的关注度不一，伴随着关注度的变化，用户需要自定义数据指标展示的排布，比如用户可对数据大盘/大屏展示的可视化元素进行移动(拖放)。因此，当显示界面中的卡片被移动时，可将该被移动的卡片作为第一个卡片，并对在预设方向上位于该被移动的卡片之后的卡片进行排序，从而执行本说明书的卡片布局方案以自动适配不同分辨率或尺寸规格的显示界面。

在另一种情况下，当监测到满足以下条件中至少之一时，卡片可能会出现挤压或拉伸：显示界面的尺寸规格发生变化、显示界面中的卡片被放大、显示界面中的卡片被缩小。例如，用户调整显示界面的尺寸规格；或者，当对显示界面的屏幕分辨率进行调整时，若调整方式未按照等宽高比调整显示界面的缩放比，则卡片将出现挤压或拉伸的情况，从而可能导致卡片之间发生碰撞。在该情况下，可将显示界面中的所有卡片进行排序，进而执行本说明书的卡片布局方案以解决卡片之间的碰撞问题。

进一步的，针对显示界面满足上述条件的情况，在对显示界面上的卡片进行排序之前，可先将显示界面中的各个卡片沿该预设方向紧缩；其中，任一卡片在发生碰撞或者边界与显示界面的边界重合的情况下停止紧缩。例如，以预设方向为垂直方向(即垂直紧凑)为例，首先可先按照垂直方向进行紧缩(即y-＝1，向y轴反方向紧缩)，当满足以下任一条件即停止紧缩：监测到与其他卡片发生碰撞、卡片的边界与显示界面的边界重合(即y＝0)。

步骤104，依次针对所述显示界面上的卡片执行解决碰撞操作。

在本实施例中，在按照预设方向对显示界面的卡片进行排序后，则按照该预设方向依次解决各个卡片的碰撞。其中，针对任一卡片执行的解决碰撞操作可以包括：先确定与该任一卡片发生碰撞的碰撞卡片，再按照预设方向将碰撞卡片移动至位于该任一卡片之后，且与该任一卡片不发生碰撞的空余位置。基于上述解决碰撞的操作，在对最后一个卡片执行碰撞操作之后，显示界面的所有卡片之间均不存在碰撞问题。

在本实施例中，在针对任一卡片执行解决碰撞操作时，可先确定位于碰撞卡片之后且与该碰撞卡片发生碰撞的障碍卡片，再按照预设方向将该障碍卡片移动至特定位置；其中，该特定位置为不与移动至空余位置后的该碰撞卡片发生碰撞的位置。在通过上述方式为碰撞卡片“空出空余位置”之后，再按照预设方向将碰撞卡片移动至空余位置。

进一步的，在实际应用时，可引入目标卡片集合和已解决碰撞序列来完成上述解决碰撞的过程。作为一示例性实施例，将显示界面中排序后的卡片作为目标卡片集合，将目标卡片集合中的第一个卡片加入已解决碰撞序列中，依次针对目标卡片集合中的剩余卡片执行解决碰撞操作以避免与区别于自身的其他卡片发生碰撞，并将执行完解决碰撞操作的卡片加入已解决碰撞序列中。其中，针对任一卡片执行的解决碰撞操作包括：确定已解决碰撞序列中与该任一卡片发生碰撞的第一碰撞卡片，以及任一卡片在预设方向上与第一碰撞卡片不发生碰撞的空余位置，确定位于该任一卡片之后的卡片中与该任一卡片发生碰撞的第二碰撞卡片，按照预设方向将第二碰撞卡片移动至特定位置(不与移动至空余位置后的该任一卡片发生碰撞的位置)，以及将该任一卡片移动至空余位置。

通过对目标卡片集合中的卡片按照预设方向进行排序，可基于排序后的卡片进行遍历，确定与当前卡片发生碰撞的第一碰撞卡片，并在将当前卡片移动至空余位置之前，将与该当前卡片发生碰撞的第二碰撞卡片移动至特定位置以“空出该空余位置”，(即遍历出与该当前卡片发生碰撞的卡片并移动至特定位置，直到不存在与该当前卡片发生碰撞的卡片为止)，使得在将该当前卡片移动至空余位置之后，不会与后面的卡片发生碰撞。循环执行上述遍历排序后卡片的过程，直到已解决碰撞序列中记录目标卡片集合中的全部卡片为止，即完成了对目标卡片集合的重新布局，保证目标卡片集合中的各个卡片之间不会发生碰撞。

在确定位于碰撞卡片之后且与碰撞卡片发生碰撞的障碍卡片时，可按照预设方向遍历位于该碰撞卡片之后的卡片，当遍历过程中的当前卡片未与该碰撞卡片发生碰撞时，那么说明之后的卡片也不会与该当前卡片发生碰撞。因此可停止遍历操作，并将位于该当前卡片之前的卡片作为障碍卡片。

例如，基于按照预设方向对目标卡片集合中的卡片进行排序，在确定属于第二碰撞卡片的卡片时，可按照该预设方向遍历位于所述当前卡片之后的卡片，当遍历过程中的任一卡片未与所述当前卡片发生碰撞时，可停止遍历位于所述当前卡片之后的卡片的操作，并将位于该卡片之前的卡片作为第二碰撞卡片。由于按照预设方向遍历位于当前卡片之后的卡片，一旦在遍历过程中确定出第一个未与该当前卡片发生碰撞的卡片，那么说明之后的卡片也不会与该当前卡片发生碰撞。因此，停止遍历操作，可减少不必要的操作，进而提高布局的效率。

在本实施例中，当发生目标卡片集合中的卡片被放大、目标卡片集合中的卡片被缩小、用于显示目标卡片集合的显示界面的尺寸规格发生变化、显示界面的分辨率发生变化等事件时，卡片的尺寸规格将发生变化(挤压或者拉伸)。因此，可相应调整各卡片容器承载的可视化元素以适应变化后卡片的宽高。

为了便于理解，下面结合举例和示意图对本说明书的布局过程进行详细说明。

请参见图2，图2是一示例性实施例提供的另一种卡片布局方法的流程图。如图2所示，该方法可以包括以下步骤：

步骤202，初始化屏幕坐标系。

在本实施例中，当显示界面中的卡片发生移动，或者显示界面的规格发生变化、或者显示界面的分辨率发生变化时，可将显示界面以画板的形式来初始化坐标系。如图3所示，可将画板p分为n份(以下每份称为cols)，按照cols定义每个卡片所占空间的大小。同时，还需定义卡片左上角坐标(x,y)和卡片所占高度h。例如，画板p的宽度为1200px，n＝12(即每个单位栅格为100个像素点),containerpadding[0](容器内距离[0])＝24px、containerpadding[1](容器内距离[1])＝24px(即containerpadding＝[24px，24px])。那么，卡片1的坐标为[0,0],换算成相对画布的坐标为[24px，24px]；卡片1的宽(w)为2，高(h)为2，那么实际宽度为(1200/12)*2＝200px。其中，画板p以垂直向下为y轴正方向，水平向右为x轴正方向。

步骤204，卡片垂直紧缩。

以预设方向为垂直方向为例，画板中的卡片向y轴负方向按照单位栅格进行紧缩(即y-＝1)。其中，当满足以下任一条件即停止紧缩：监测到与其他卡片发生碰撞、卡片的边界与画板的边界重合(即y＝0)。

如图4所示，以屏幕尺寸规格发生变化为例，画板a(图4包括a1-a4的布局过程)的目标卡片集合包括卡片1-3(排序方式在后文进行说明)。画板a的尺寸规格发生变化后得到画板a1，首先进行垂直紧缩，卡片1向y轴负方向(即图中垂直向上方向)进行紧缩，直到卡片1的上测边界与画板a1边界重合(即y＝0)；而卡片2-3由于发生碰撞而没有进行紧缩。

步骤206，依次遍历目标卡片集合。

承接于上述举例，目标卡片集合中的第一个卡片为卡片1，将卡片1加入至已解决碰撞序列s中。

步骤208，确定第一碰撞卡片以得到空余位置。

步骤210，解除与第二碰撞卡片的碰撞。

步骤212，将当前卡片移动至空余位置。

在本实施例中，在停止垂直紧缩后，将当前卡片与已解决碰撞序列s中的卡片(处于非碰撞状态)进行碰撞监测。若当前卡片与已解决碰撞序列s中的卡片存在碰撞，假设当前卡片为a，与卡片a发生碰撞的卡片为b(第一碰撞卡片)，则计划将卡片a移动至b.y+b.h(即位于卡片b下方的空余位置)。而在移动卡片a之前，检测卡片a是否与下方的其他卡片存在碰撞，若存在碰撞，则将与卡片a存在碰撞的卡片(第二碰撞卡片)移动至b.y+b.h+a.h(即特定位置)，直到卡片a与下方的其他卡片不存在碰撞，进而再将卡片a移动至b.y+b.h。

步骤214，将当前卡片加入已解决碰撞序列。

承接于上述举例，将卡片1加入至已解决碰撞序列s后，遍历目标卡片集合的过程中的当前卡片来到卡片2，卡片2与已解决碰撞序列s进行碰撞监测，确定出卡片2与已解决碰撞序列s中的卡片1发生碰撞(即此时卡片1为第一碰撞卡片)，进而确定出需要将卡片2移动至卡片1.y+卡片1.h(即位于卡片1下方的空余位置)。而在移动卡片2之前，检测卡片2是否与下方的其他卡片存在碰撞，若存在碰撞，则将与卡片2存在碰撞的卡片(第二碰撞卡片)移动至卡片1.y+卡片1.h+卡片2.h(即特定位置)，直到卡片2与下方的其他卡片不存在碰撞，进而再将卡片2移动至卡片1.y+卡片1.h。由图4可知，卡片3与卡片2存在碰撞，因此将卡片3移动至卡片1.y+卡片1.h+卡片2.h，得到a3所示的画板布局。此时，卡片2与下方的其他卡片不存在碰撞，因此将卡片2移动至卡片1.y+卡片1.h，得到a4所示的画板布局。进一步的，将卡片2加入已解决碰撞序列s以继续执行后续的遍历过程。其中，当已解决碰撞序列s中包含目标卡片集合中所有的卡片时，可判定遍历过程结束。

需要注意的是，在遍历检测卡片2是否与下方的其他卡片存在碰撞时，若排序在卡片2之后的某一卡片的y值大于卡片2.y+卡片2.h(即与卡片2不存在碰撞)，那么位于该卡片之后的卡片也必定也与卡片2不存在碰撞。因此，可在遍历过程执行到该卡片并确定出该卡片与卡片2不存在碰撞时，可停止遍历操作。下面结合排序方式进行详细说明。

如图5所示，以预设方向为垂直方向，垂直向下为y轴正方向，水平向右为x轴正方向为例。针对y轴坐标相同的卡片，按照从左到右的顺序进行排序。即针对卡片a和卡片b，排序规则为a.y<b.y,if(a,y＝＝＝b.y)a.x<b.x。因此，在解除碰撞进行遍历的过程中，与卡片3发生碰撞的卡片为卡片4-5，而卡片6的y值>卡片3.y+卡片3.h。可见，卡片6之后的卡片7的y值也必定大于卡片3.y+卡片3.h，因此卡片6之后的卡片不需要再遍历了。

步骤216，若遍历完目标卡片集合，则转入步骤218；否则，转入步骤208以继续遍历过程。

步骤218，判定完成在预设方向上的重新布局。

如图6-7，以移动卡片的场景为例进行说明。如图6所示，画板b1包括卡片a、b、f，将卡片a移动形成画板b2所示的布局。此时卡片a作为目标卡片集合中的卡片。由于卡片a与卡片b发生碰撞，需要将卡片b移动以解除与卡片a的碰撞。因此，将卡片b(左上角)移动至卡片a.y+卡片a.h，形成画板b3所示的布局。当然，在移动卡片b之前，与上述类似，检测卡片b是否与下方的其他卡片存在碰撞，若存在碰撞，则将与卡片b存在碰撞的卡片移动至卡片a.y+卡片a.h+卡片b.h的位置，直到卡片b与下方的其他卡片不存在碰撞，进而再将卡片b移动至卡片a.y+卡片a.h。该过程原理与上述类似，在此不再赘述。

当然，还可通过向上移动来解除碰撞。如图7所示，画板c1包括卡片a、b、f，将卡片a移动形成画板c2所示的布局。由于卡片a与卡片b发生碰撞，需要将卡片b移动以解除与卡片a的碰撞。因此，将卡片b(左上角)移动至卡片a.y-卡片b.h，形成画板b3所示的布局。当然，在移动卡片b之前，与上述类似，检测卡片b是否与上方的其他卡片存在碰撞，若存在碰撞(将存在碰撞的卡片记为卡片c)，则将与卡片b存在碰撞的卡片移动至卡片a.y-卡片b.h-卡片c.h的位置，进而再将卡片b移动至卡片a.y-卡片b.h。该过程原理与上述类似，在此不再赘述。

在本实施例中，当发生目标卡片集合中的卡片被放大、目标卡片集合中的卡片被缩小、用于显示目标卡片集合的画板的尺寸规格发生变化、画板的分辨率发生变化等事件时，卡片的尺寸规格将发生变化(挤压或者拉伸)。因此，可相应调整各卡片容器承载的可视化元素以适应变化后卡片的宽高。

由以上实施例可见，通过对目标卡片集合中的卡片按照预设方向进行排序，可基于排序后的卡片进行遍历，确定与当前卡片发生碰撞的第一碰撞卡片，并在将当前卡片移动至空余位置之前，将与该当前卡片发生碰撞的第二碰撞卡片移动至特定位置以“空出该空余位置”，(即遍历出与该当前卡片发生碰撞的卡片并移动至特定位置，直到不存在与该当前卡片发生碰撞的卡片为止)，使得在将该当前卡片移动至空余位置之后，不会与后面的卡片发生碰撞。循环执行上述遍历排序后卡片的过程，直到已解决碰撞序列中记录目标卡片集合中的全部卡片为止，即完成了对目标卡片集合的重新布局，保证目标卡片集合中的各个卡片之间不会发生碰撞。

图8是一示例性实施例提供的一种设备的示意结构图。请参考图8，在硬件层面，该设备包括处理器802、内部总线804、网络接口806、内存808以及非易失性存储器810，当然还可能包括其他业务所需要的硬件。处理器802从非易失性存储器810中读取对应的计算机程序到内存808中然后运行，在逻辑层面上形成卡片布局装置。当然，除了软件实现方式之外，本说明书一个或多个实施例并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

请参考图9，在软件实施方式中，该卡片布局装置应用于显示设备，所述显示设备的显示界面中包含多个卡片，可以包括：

排序单元91，按照所述显示界面上的预设方向对所述显示界面上的卡片进行排序；

布局单元92，依次针对所述显示界面上的卡片执行解决碰撞操作；其中，针对任一卡片执行的解决碰撞操作包括：

确定与所述任一卡片发生碰撞的碰撞卡片；

按照所述预设方向将所述碰撞卡片移动至位于所述任一卡片之后，且与所述任一卡片不发生碰撞的空余位置。

可选的，所述排序单元91具体用于：

当所述显示界面中的卡片被移动时，将该被移动的卡片作为第一个卡片；

对在所述预设方向上位于该被移动的卡片之后的卡片进行排序。

可选的，所述排序单元91具体用于：

当监测到满足以下条件中至少之一时，按照所述预设方向对所述显示界面中的所有卡片进行排序：

所述显示界面的尺寸规格发生变化、所述显示界面中的卡片被放大、所述显示界面中的卡片被缩小。

可选的，在对所述显示界面上的卡片进行排序之前，所述装置还包括：

紧缩单元93，将所述显示界面上的卡片沿所述预设方向紧缩；

其中，任一卡片在发生碰撞或者边界与所述显示界面的边界重合的情况下停止紧缩。

可选的，所述布局单元92具体用于：

确定位于所述碰撞卡片之后且与所述碰撞卡片发生碰撞的障碍卡片；

按照所述预设方向将所述障碍卡片移动至特定位置，所述特定位置为不与移动至所述空余位置后的所述碰撞卡片发生碰撞的位置；

按照所述预设方向将所述碰撞卡片移动至所述空余位置。

可选的，所述布局单元92进一步用于：

按照所述预设方向遍历位于所述碰撞卡片之后的卡片；

当遍历过程中的当前卡片未与所述碰撞卡片发生碰撞时，停止遍历操作，并将位于所述当前卡片之前的卡片作为所述障碍卡片。

可选的，所述显示界面被按照预设数量的像素点为单位划分为若干栅格，所述显示界面上的卡片以所述栅格为单位进行移动。

可选的，当所述预设方向包括所述显示界面上的垂直方向时，在垂直方向上相同的卡片被按照水平方向进行排序，当所述预设方向包括所述显示界面上的水平方向时，在水平方向上相同的卡片被按照垂直方向进行排序。

可选的，还包括：

调整单元94，当监测到满足以下条件中至少之一时，调整各卡片承载的可视化元素以适应变化后卡片的宽高：

所述显示界面中的卡片被放大、所述显示界面中的卡片被缩小、所述显示界面的尺寸规格发生变化。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

在一个典型的配置中，计算机包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带、磁盘存储、量子存储器、基于石墨烯的存储介质或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

在本说明书一个或多个实施例使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本说明书一个或多个实施例。在本说明书一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本说明书一个或多个实施例可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本说明书一个或多个实施例范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

以上所述仅为本说明书一个或多个实施例的较佳实施例而已，并不用以限制本说明书一个或多个实施例，凡在本说明书一个或多个实施例的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本说明书一个或多个实施例保护的范围之内。