CN113792237B - 卡片式布局的优化方法、装置、存储介质及处理器 - Google Patents

Abstract

本申请公开了一种卡片式布局的优化方法、装置、存储介质及处理器，该方法包括：若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。通过本申请，解决了相关技术中卡片式的布局的灵活度较低的问题。

Description

卡片式布局的优化方法、装置、存储介质及处理器

技术领域

本申请涉及网页界面处理技术领域，具体而言，涉及一种卡片式布局的优化方法、装置、存储介质及处理器。

背景技术

随着前端技术的发展，人们不再满足于传统的静态网页内容展示，对页面数据的展示提出了更高的要求。在现代网页设计中，常常会出现以卡片的形式展示数据。这种展示方式会使页面更加简约整洁，但是由于卡片展示的顺序常常是固定的，无法满足用户的自定义顺序展示卡片的要求。

针对相关技术中卡片式的布局的灵活度较低的问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种卡片式布局的优化方法、装置、存储介质及处理器，以解决相关技术中卡片式的布局的灵活度较低的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种卡片式布局的优化方法。该方法包括：若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

进一步地，在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，该方法还包括：判断当前卡片的布局信息与卡片的原始布局信息是否存在差异；若当前卡片的布局信息与卡片的原始布局信息存在差异，确定卡片容器中卡片的布局信息发生变化；将变化后的卡片的布局信息按照坐标顺序进行排列，得到变化后的布局信息。

进一步地，若当前卡片的布局信息与卡片的原始布局信息是否存在差异包括：获取卡片容器中每个卡片的布局信息中的卡片的id信息；通过每个卡片的id信息得到每个卡片的原始布局信息；判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异。

进一步地，卡片的布局信息包括如下至少之一：卡片的宽度信息、卡片的高度信息、卡片的坐标信息，其中，坐标信息包括卡片的横坐标的数值信息、卡片的纵坐标的数值信息。

进一步地，若对卡片的位置信息进行变更时，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化包括：设置第一布局信息中的目标移动卡片的坐标值，其中，设置目标移动卡片的横坐标的初始数值为第一预设值、设置目标移动卡片的纵坐标的初始数值为第二预设值；若目标移动卡片的宽度等于卡片容器的宽度，则增加目标移动卡片的纵坐标的数值，确定目标移动卡片的横坐标的数值为第一预设值，获取目标移动卡片的第一坐标信息；变更后的第一布局信息按照目标移动卡片的第一坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

进一步地，该方法还包括：若第一布局信息中的目标移动卡片的宽度等于卡片容器的宽度的一半时，判断目标移动卡片的横坐标的数值是否为第一预设值；若目标移动卡片的横坐标的数值为第一预设值，则增加目标移动卡片的横坐标的数值；若目标移动卡片的横坐标的数值非第一预设值，则增加目标移动卡片的纵坐标的数值，获取目标移动卡片的第二坐标信息；变更后的第一布局信息按照目标移动卡片的第二坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

进一步地，若对卡片的数量信息进行变更时，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化包括：根据卡片的第一布局信息确定卡片的二维数组，设置二维数组中每个元素的长度信息为第三预设值，其中，二维数组的长度为卡片的第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中每个元素的长度等于第三预设值，则确定二维数组中新增卡片的纵坐标的数值为第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中目标元素的长度小于第三预设值，则根据目标元素的下标信息确定新增卡片的纵坐标的数值；根据新增卡片的纵坐标的数值确定新增卡片的坐标信息；变更后的第一布局信息按照新增卡片的坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

为了实现上述目的，根据本申请的另一方面，提供了一种卡片式布局的优化装置。该装置包括：第一删除单元，用于若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；第一变更单元，用于对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；第一排列单元，用于基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

进一步地，该装置还包括：第一判断单元，用于在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，判断当前卡片的布局信息与卡片的原始布局信息是否存在差异；第一确定单元，用于若当前卡片的布局信息与卡片的原始布局信息存在差异，确定卡片容器中卡片的布局信息发生变化；第二排列单元，用于将变化后的卡片的布局信息按照坐标顺序进行排列，得到变化后的布局信息。

进一步地，第一确定单元包括：第一获取模块，用于获取卡片容器中每个卡片的布局信息中的卡片的id信息；第二获取模块，用于通过每个卡片的id信息得到每个卡片的原始布局信息；第一判断模块，用于判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异。

进一步地，卡片的布局信息包括如下至少之一：卡片的宽度信息、卡片的高度信息、卡片的坐标信息，其中，坐标信息包括卡片的横坐标的数值信息、卡片的纵坐标的数值信息。

进一步地，若对卡片的位置信息进行变更时，第一排列单元包括：第一设置模块，用于设置第一布局信息中的目标移动卡片的坐标值，其中，设置目标移动卡片的横坐标的初始数值为第一预设值、设置目标移动卡片的纵坐标的初始数值为第二预设值；第一确定模块，用于若目标移动卡片的宽度等于卡片容器的宽度，则增加目标移动卡片的纵坐标的数值，确定目标移动卡片的横坐标的数值为第一预设值，获取目标移动卡片的第一坐标信息；第一排列模块，用于变更后的第一布局信息按照目标移动卡片的第一坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

进一步地，该装置还包括：第一处理单元，用于若第一布局信息中的目标移动卡片的宽度等于卡片容器的宽度的一半时，判断目标移动卡片的横坐标的数值是否为第一预设值；若目标移动卡片的横坐标的数值为第一预设值，则增加目标移动卡片的横坐标的数值；若目标移动卡片的横坐标的数值非第一预设值，则增加目标移动卡片的纵坐标的数值，获取目标移动卡片的第二坐标信息；第三排列单元，用于变更后的第一布局信息按照目标移动卡片的第二坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

进一步地，若对卡片的数量信息进行变更时，第一排列单元还包括：第二确定模块，用于根据卡片的第一布局信息确定卡片的二维数组，设置二维数组中每个元素的长度信息为第三预设值，其中，二维数组的长度为卡片的第一布局信息的行数信息；第三确定模块，用于在二维数组中卡片数量增加的情况下，若检测到二维数组中每个元素的长度等于第三预设值，则确定二维数组中新增卡片的纵坐标的数值为第一布局信息的行数信息；第四确定模块，用于在二维数组中卡片数量增加的情况下，若检测到二维数组中目标元素的长度小于第三预设值，则根据目标元素的下标信息确定新增卡片的纵坐标的数值；第五确定模块，用于根据新增卡片的纵坐标的数值确定新增卡片的坐标信息；第二排列模块，用于变更后的第一布局信息按照新增卡片的坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

根据本申请实施例的另一方面，还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述任意一项的方法。

根据本申请实施例的另一方面，还提供了一种计算机可读存储介质，其上存储有计算机程序/指令，该计算机程序/指令被处理器执行时执行上述任意一项的方法。

通过本申请，采用以下步骤：若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。解决了相关技术中卡片式的布局的灵活度较低的问题，本申请通过对卡片的第一布局信息执行变更操作，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化，进而达到了提高卡片式的布局的灵活度的效果。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例提供的卡片式布局的优化方法的流程图；

图2是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例一的示意图；

图3是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例二的示意图；

图4是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例三的示意图；

图5是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例四的示意图；以及

图6是根据本申请实施例提供的卡片式布局的优化装置的示意图。

具体实施方式

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

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

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

根据本申请的实施例，提供了一种卡片式布局的优化方法。

图1是根据本申请实施例的卡片式布局的优化方法的流程图。如图1所示，该方法包括以下步骤：

步骤S101，若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息。

例如，图2是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例一的示意图，在网页上卡片容器中的卡片布局信息如图2实例所示，其中，若图2中实例的卡片布局如下逻辑代码可以如下所示：

可选地，在本申请实施例提供的卡片式布局的优化方法中，卡片的布局信息包括如下至少之一：卡片的宽度信息、卡片的高度信息、卡片的坐标信息，其中，坐标信息包括卡片的横坐标的数值信息、卡片的纵坐标的数值信息。

例如，如图2所示，在卡片容器内，包含卡片1、卡片2、卡片3、卡片4、卡片5，大卡片的宽度是小卡片的宽度的两倍，大卡片与小卡片的高相等，卡片的宽度用w表示一个单位的宽度，h表示一个单位的高度，小卡片的宽度为w，大卡片的宽度为2w。整个卡片容器的宽度也是2w。卡片的位置信息用x表示横向坐标，y表示纵向坐标，同一列的卡片x值相同，同一行的卡片y值相同。

如果将上述图2中卡片5移动至卡片3的前面位置，得到如图3所示的实例，其中，图3中实例的卡片布局如下逻辑代码可以如下所示：

可选地，在本申请实施例提供的卡片式布局的优化方法中，在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，该方法还包括：判断当前卡片的布局信息与卡片的原始布局信息是否存在差异；若当前卡片的布局信息与卡片的原始布局信息存在差异，确定卡片容器中卡片的布局信息发生变化；将变化后的卡片的布局信息按照坐标顺序进行排列，得到变化后的布局信息。

例如，图3是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例二的示意图，将上述图2中卡片5移动至卡片3的前面位置，得到如图3所示的实例，其中，将上述图3中卡片的布局信息确定为本申请的当前卡片的布局信息，将上述图2中的卡片的布局信息确定为本申请中的卡片的原始布局信息，判断图3以及图2中的卡片的布局信息是否存在差异，若存在差异，确定图2中的卡片容器中卡片的布局信息发生变化，并对图2中的卡片容器中卡片的布局信息按照坐标顺序进行排序，得到图3所示的实例，其中，如图3所示，在卡片容器中，排序后的卡片5位于卡片3的前面位置。

可选地，在本申请实施例提供的卡片式布局的优化方法中，若当前卡片的布局信息与卡片的原始布局信息是否存在差异包括：获取卡片容器中每个卡片的布局信息中的卡片的id信息；通过每个卡片的id信息得到每个卡片的原始布局信息；判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异。

例如，判断图3以及图2中的卡片的布局信息是否存在差异的具体步骤为，首先获取变化后的图3中的每个卡片的布局信息中的卡片的id信息，通过图3中每个卡片的id信息得到图2中每个卡片的布局信息，对比每个卡片变化前后的宽(w)、高(h)、横坐标(x)以及纵坐标(y)可知，在本示例中，由于将卡片5位于卡片3的前面位置，不仅卡片3、卡片5的坐标发生了变化，卡片4的坐标也发生了相应的变化，因此，可以判断出图2中卡片的布局信息发生了变化，对变化后的图3中的卡片容器中的布局信息的卡片空白位置信息进行删除，得到卡片的第一布局信息。

其中，删除卡片空白位置信息的逻辑代码实现可以如下所示：

步骤S102，对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更。

例如，如图3所示，在第一布局信息中，卡片3的宽度是2w，卡片4以及卡片5的宽度为1w，将卡片4的位置信息移动到卡片5的位置信息之后，得到变更后的第一布局信息，使得整个卡片布局变得整洁有序。

具体的，本步骤上述示例的实现逻辑代码实现可以如下所示：

步骤S103，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

例如，根据步骤S102的示例的逻辑代码可知，变更后的第一布局信息中每个卡片的坐标基于卡片容器并不是有序的，因此，本申请需要对变更后的第一布局信息对卡片进行排列，以实现对卡片容器中卡片的布局进行优化。

可选地，在本申请实施例提供的卡片式布局的优化方法中，该方法还包括：若第一布局信息中的目标移动卡片的宽度等于卡片容器的宽度的一半时，判断目标移动卡片的横坐标的数值是否为第一预设值；若目标移动卡片的横坐标的数值为第一预设值，则增加目标移动卡片的横坐标的数值；若目标移动卡片的横坐标的数值非第一预设值，则增加目标移动卡片的纵坐标的数值，获取目标移动卡片的第二坐标信息；变更后的第一布局信息按照目标移动卡片的第二坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

例如，根据步骤S102的示例的逻辑代码中，卡片4的坐标信息的x值为0，y值为3，卡片3的坐标信息的x值为0，y值为3，显然，卡片4以及卡片3在卡片容器中坐标是无序的，对卡片容器中卡片4的布局进行优化时，设置第一布局信息中的目标移动卡片1的横坐标值的初始数值为newX＝0，设置第一布局信息中的目标移动卡片1的纵坐标值的初始数值为newY＝0，对卡片容器进行遍历时，卡片4的横坐标的数值newX＝0，newY＝1，由于卡片4宽度为1w，等于卡片容器的宽度的一半，此时卡片4的newX＝0，将遍历后的卡片4的横坐标newX值加1，newY＝1不变，则遍历后的卡片4在卡片容器中的坐标信息为x＝1，y＝1。本申请通过对小于卡片容器宽度的卡片进行坐标信息的排列，使得卡片容器中卡片的布局更加整洁规律。

可选地，在本申请实施例提供的卡片式布局的优化方法中，若对卡片的位置信息进行变更时，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化包括：设置第一布局信息中的目标移动卡片的坐标值，其中，设置目标移动卡片的横坐标的初始数值为第一预设值、设置目标移动卡片的纵坐标的初始数值为第二预设值；若目标移动卡片的宽度等于卡片容器的宽度，则增加目标移动卡片的纵坐标的数值，确定目标移动卡片的横坐标的数值为第一预设值，获取目标移动卡片的第一坐标信息；变更后的第一布局信息按照目标移动卡片的第一坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

例如，对卡片容器中卡片3的布局进行优化时，设置第一布局信息中的目标移动卡片1的横坐标值的初始数值为newX＝0，设置第一布局信息中的目标移动卡片1的纵坐标值的初始数值为newY＝0，对卡片容器中卡片4进行遍历后，卡片4的横坐标的数值坐标信息为x＝1，y＝1，也即卡片3的当前坐标信息为newX＝1，newY＝1，由于卡片3宽度为2w，等于卡片容器的宽度，此时卡片3的newX不等于0，则设置遍历后的卡片3的横坐标为0，卡片3的横坐标newY值加1，也即newY＝2，则设置遍历后的卡片3在卡片容器中的坐标信息为x＝0，y＝2。基于卡片3排列后的坐标信息对变更后的第一布局信息进行优化，使得卡片容器中卡片的布局更加整洁规律。本申请通过对等于卡片容器宽度的卡片进行坐标信息的排列，使得卡片容器中卡片的布局更加整洁规律。

图4是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例三的示意图，如图4所示，卡片3经过卡片的布局优化，位于卡片4之后。其中，图4的逻辑代码实现可以如下所示：

综上，本申请通过页面逐级渲染的方式，按照卡片不同大小对卡片的布局信息进行调整，进一步体现了本申请卡片布局的高度灵活性。

可选地，在本申请实施例提供的卡片式布局的优化方法中，若对卡片的数量信息进行变更时，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化包括：根据卡片的第一布局信息确定卡片的二维数组，设置二维数组中每个元素的长度信息为第三预设值，其中，二维数组的长度为卡片的第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中每个元素的长度等于第三预设值，则确定二维数组中新增卡片的纵坐标的数值为第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中目标元素的长度小于第三预设值，则根据目标元素的下标信息确定新增卡片的纵坐标的数值；根据新增卡片的纵坐标的数值确定新增卡片的坐标信息；变更后的第一布局信息按照新增卡片的坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

例如，图5是根据本申请实施例提供的卡片式布局的优化方法的卡片布局实例四的示意图，如图5所示，逻辑代码实现可以如下所示：

当添加一个新的卡片时，假设新增卡片的布局信息为{x:0,y:0,w:1,h:1,name:”新增卡片”}

例如，根据图5的布局信息创建一个二维数组，其长度是卡片布局的行数，其中，该二维数组的每一个元素是一个长度为2(对应于本申请中的第三预设值)的数组，遍历卡片容器的布局信息，将横坐标相同的卡片(即同一行的卡片)依次放入二维数组中；如果新增卡片的宽度w＝2，若检测到二维数组中每个元素的长度等于第三预设值，则该卡片同时放入二维数组元素的第一位和第二位，则确定二维数组中新增卡片的纵坐标的数值为第一布局信息的行数信息，若检测到二维数组中目标元素的长度小于第三预设值，则该卡片同时放入二维数组元素的第一位和第二位，目标元素的下标信息确定新增卡片的纵坐标的数值，也即，新增卡片的y＝index，横坐标x＝1。本申请通过二维数组的遍历方式优化卡片的布局信息的同时，提高了新增卡片的生成效率，进一步提升了用户体验。

综上，本申请实施例提供的卡片式布局的优化方法，通过若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。解决了相关技术中卡片式的布局的灵活度较低的问题，本申请通过对卡片的第一布局信息执行变更操作，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化，进而达到了提高卡片式的布局的灵活度的效果。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例还提供了一种卡片式布局的优化装置，需要说明的是，本申请实施例的卡片式布局的优化装置可以用于执行本申请实施例所提供的用于卡片式布局的优化方法。以下对本申请实施例提供的卡片式布局的优化装置进行介绍。

图6是根据本申请实施例的卡片式布局的优化装置的示意图。如图6所示，该装置包括：第一删除单元601、第一变更单元602、第一排列单元603。

具体的，第一删除单元601，用于若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；

第一变更单元602，用于对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；

第一排列单元603，用于基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

综上，本申请实施例提供的卡片式布局的优化装置，通过第一删除单元601，用于若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；第一变更单元602，用于对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；第一排列单元603，用于基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化，解决了相关技术中卡片式的布局的灵活度较低的问题，本申请通过对卡片的第一布局信息执行变更操作，基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化，进而达到了提高卡片式的布局的灵活度的效果。

可选地，在本申请实施例提供的卡片式布局的优化装置中，该装置还包括：第一判断单元，用于在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，判断当前卡片的布局信息与卡片的原始布局信息是否存在差异；第一确定单元，用于若当前卡片的布局信息与卡片的原始布局信息存在差异，确定卡片容器中卡片的布局信息发生变化；第二排列单元，用于将变化后的卡片的布局信息按照坐标顺序进行排列，得到变化后的布局信息。

可选地，在本申请实施例提供的卡片式布局的优化装置中，第一确定单元包括：第一获取模块，用于获取卡片容器中每个卡片的布局信息中的卡片的id信息；第二获取模块，用于通过每个卡片的id信息得到每个卡片的原始布局信息；第一判断模块，用于判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异。

可选地，在本申请实施例提供的卡片式布局的优化装置中，卡片的布局信息包括如下至少之一：卡片的宽度信息、卡片的高度信息、卡片的坐标信息，其中，坐标信息包括卡片的横坐标的数值信息、卡片的纵坐标的数值信息。

可选地，在本申请实施例提供的卡片式布局的优化装置中，若对卡片的位置信息进行变更时，第一排列单元603包括：第一设置模块，用于设置第一布局信息中的目标移动卡片的坐标值，其中，设置目标移动卡片的横坐标的初始数值为第一预设值、设置目标移动卡片的纵坐标的初始数值为第二预设值；第一确定模块，用于若目标移动卡片的宽度等于卡片容器的宽度，则增加目标移动卡片的纵坐标的数值，确定目标移动卡片的横坐标的数值为第一预设值，获取目标移动卡片的第一坐标信息；第一排列模块，用于变更后的第一布局信息按照目标移动卡片的第一坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

可选地，在本申请实施例提供的卡片式布局的优化装置中，该装置还包括：第一处理单元，用于若第一布局信息中的目标移动卡片的宽度等于卡片容器的宽度的一半时，判断目标移动卡片的横坐标的数值是否为第一预设值；若目标移动卡片的横坐标的数值为第一预设值，则增加目标移动卡片的横坐标的数值；若目标移动卡片的横坐标的数值非第一预设值，则增加目标移动卡片的纵坐标的数值，获取目标移动卡片的第二坐标信息；第三排列单元，用于变更后的第一布局信息按照目标移动卡片的第二坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

可选地，在本申请实施例提供的卡片式布局的优化装置中，若对卡片的数量信息进行变更时，第一排列单元603还包括：第二确定模块，用于根据卡片的第一布局信息确定卡片的二维数组，设置二维数组中每个元素的长度信息为第三预设值，其中，二维数组的长度为卡片的第一布局信息的行数信息；第三确定模块，用于在二维数组中卡片数量增加的情况下，若检测到二维数组中每个元素的长度等于第三预设值，则确定二维数组中新增卡片的纵坐标的数值为第一布局信息的行数信息；第四确定模块，用于在二维数组中卡片数量增加的情况下，若检测到二维数组中目标元素的长度小于第三预设值，则根据目标元素的下标信息确定新增卡片的纵坐标的数值；第五确定模块，用于根据新增卡片的纵坐标的数值确定新增卡片的坐标信息；第二排列模块，用于变更后的第一布局信息按照新增卡片的坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

卡片式布局的优化装置包括处理器和存储器，上述的第一删除单元601、第一变更单元602、第一排列单元603等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来进行卡片式布局的优化。

存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本发明实施例提供了一种计算机可读存储介质，其上存储有程序，该程序被处理器执行时实现卡片式布局的优化方法。

本发明实施例提供了一种处理器，处理器用于运行程序，其中，程序运行时执行卡片式布局的优化方法。

本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

处理器执行程序时还实现以下步骤：在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，判断当前卡片的布局信息与卡片的原始布局信息是否存在差异；若当前卡片的布局信息与卡片的原始布局信息存在差异，确定卡片容器中卡片的布局信息发生变化；将变化后的卡片的布局信息按照坐标顺序进行排列，得到变化后的布局信息。

处理器执行程序时还实现以下步骤：获取卡片容器中每个卡片的布局信息中的卡片的id信息；通过每个卡片的id信息得到每个卡片的原始布局信息；判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异。

处理器执行程序时还实现以下步骤：卡片的布局信息包括如下至少之一：卡片的宽度信息、卡片的高度信息、卡片的坐标信息，其中，坐标信息包括卡片的横坐标的数值信息、卡片的纵坐标的数值信息。

处理器执行程序时还实现以下步骤：设置第一布局信息中的目标移动卡片的坐标值，其中，设置目标移动卡片的横坐标的初始数值为第一预设值、设置目标移动卡片的纵坐标的初始数值为第二预设值；若目标移动卡片的宽度等于卡片容器的宽度，则增加目标移动卡片的纵坐标的数值，确定目标移动卡片的横坐标的数值为第一预设值，获取目标移动卡片的第一坐标信息；变更后的第一布局信息按照目标移动卡片的第一坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

处理器执行程序时还实现以下步骤：若第一布局信息中的目标移动卡片的宽度等于卡片容器的宽度的一半时，判断目标移动卡片的横坐标的数值是否为第一预设值；若目标移动卡片的横坐标的数值为第一预设值，则增加目标移动卡片的横坐标的数值；若目标移动卡片的横坐标的数值非第一预设值，则增加目标移动卡片的纵坐标的数值，获取目标移动卡片的第二坐标信息；变更后的第一布局信息按照目标移动卡片的第二坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

处理器执行程序时还实现以下步骤：根据卡片的第一布局信息确定卡片的二维数组，设置二维数组中每个元素的长度信息为第三预设值，其中，二维数组的长度为卡片的第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中每个元素的长度等于第三预设值，则确定二维数组中新增卡片的纵坐标的数值为第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中目标元素的长度小于第三预设值，则根据目标元素的下标信息确定新增卡片的纵坐标的数值；根据新增卡片的纵坐标的数值确定新增卡片的坐标信息；变更后的第一布局信息按照新增卡片的坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

本文中的设备可以是服务器、PC、PAD、手机等。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到卡片的第一布局信息；对卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，变更操作至少包括卡片的位置信息进行变更、卡片的数量信息进行变更；基于变更后的第一布局信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，判断当前卡片的布局信息与卡片的原始布局信息是否存在差异；若当前卡片的布局信息与卡片的原始布局信息存在差异，确定卡片容器中卡片的布局信息发生变化；将变化后的卡片的布局信息按照坐标顺序进行排列，得到变化后的布局信息。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：获取卡片容器中每个卡片的布局信息中的卡片的id信息；通过每个卡片的id信息得到每个卡片的原始布局信息；判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：卡片的布局信息包括如下至少之一：卡片的宽度信息、卡片的高度信息、卡片的坐标信息，其中，坐标信息包括卡片的横坐标的数值信息、卡片的纵坐标的数值信息。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：设置第一布局信息中的目标移动卡片的坐标值，其中，设置目标移动卡片的横坐标的初始数值为第一预设值、设置目标移动卡片的纵坐标的初始数值为第二预设值；若目标移动卡片的宽度等于卡片容器的宽度，则增加目标移动卡片的纵坐标的数值，确定目标移动卡片的横坐标的数值为第一预设值，获取目标移动卡片的第一坐标信息；变更后的第一布局信息按照目标移动卡片的第一坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：若第一布局信息中的目标移动卡片的宽度等于卡片容器的宽度的一半时，判断目标移动卡片的横坐标的数值是否为第一预设值；若目标移动卡片的横坐标的数值为第一预设值，则增加目标移动卡片的横坐标的数值；若目标移动卡片的横坐标的数值非第一预设值，则增加目标移动卡片的纵坐标的数值，获取目标移动卡片的第二坐标信息；变更后的第一布局信息按照目标移动卡片的第二坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

当在数据处理设备上执行时，还适于执行初始化有如下方法步骤的程序：根据卡片的第一布局信息确定卡片的二维数组，设置二维数组中每个元素的长度信息为第三预设值，其中，二维数组的长度为卡片的第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中每个元素的长度等于第三预设值，则确定二维数组中新增卡片的纵坐标的数值为第一布局信息的行数信息；在二维数组中卡片数量增加的情况下，若检测到二维数组中目标元素的长度小于第三预设值，则根据目标元素的下标信息确定新增卡片的纵坐标的数值；根据新增卡片的纵坐标的数值确定新增卡片的坐标信息；变更后的第一布局信息按照新增卡片的坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

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

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

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

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

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

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

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

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

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

以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (8)

1.一种卡片式布局的优化方法，其特征在于，包括：

若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到所述卡片的第一布局信息；

对所述卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，所述变更操作至少包括所述卡片的位置信息进行变更、所述卡片的数量信息进行变更；

基于所述变更后的第一布局信息对所述卡片进行排列，以对所述卡片容器中卡片的布局进行优化；

其中，在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，所述方法还包括：

判断当前所述卡片的布局信息与所述卡片的原始布局信息是否存在差异；其中，

获取所述卡片容器中每个卡片的布局信息中的卡片的id信息；

通过每个卡片的id信息得到每个卡片的原始布局信息；

判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异；

若对卡片的位置信息进行变更时，基于所述变更后的第一布局信息对所述卡片进行排列，以对所述卡片容器中卡片的布局进行优化包括：

设置所述第一布局信息中的目标移动卡片的坐标值，其中，设置所述目标移动卡片的横坐标的初始数值为第一预设值、设置所述目标移动卡片的纵坐标的初始数值为第二预设值；

若所述目标移动卡片的宽度等于卡片容器的宽度，则增加所述目标移动卡片的纵坐标的数值，确定所述目标移动卡片的横坐标的数值为所述第一预设值，获取所述目标移动卡片的第一坐标信息；

所述变更后的第一布局信息按照所述目标移动卡片的第一坐标信息对所述卡片进行排列，以对所述卡片容器中卡片的布局进行优化。

2.根据权利要求1所述的方法，其特征在于，在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，所述方法还包括：

若当前所述卡片的布局信息与所述卡片的原始布局信息存在差异，确定所述卡片容器中卡片的布局信息发生变化；

将变化后的所述卡片的布局信息按照坐标顺序进行排列，得到变化后的布局信息。

3.根据权利要求1所述的方法，其特征在于，所述卡片的布局信息包括如下至少之一：所述卡片的宽度信息、所述卡片的高度信息、所述卡片的坐标信息，其中，所述坐标信息包括所述卡片的横坐标的数值信息、所述卡片的纵坐标的数值信息。

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

若所述第一布局信息中的所述目标移动卡片的宽度等于卡片容器的宽度的一半时，判断所述目标移动卡片的横坐标的数值是否为所述第一预设值；若所述目标移动卡片的横坐标的数值为所述第一预设值，则增加所述目标移动卡片的横坐标的数值；若所述目标移动卡片的横坐标的数值非第一预设值，则增加所述目标移动卡片的纵坐标的数值，获取所述目标移动卡片的第二坐标信息；

所述变更后的第一布局信息按照所述目标移动卡片的第二坐标信息对所述卡片进行排列，以对所述卡片容器中卡片的布局进行优化。

5.根据权利要求4所述的方法，其特征在于，若对所述卡片的数量信息进行变更时，基于所述变更后的第一布局信息对所述卡片进行排列，以对所述卡片容器中卡片的布局进行优化包括：

根据所述卡片的第一布局信息确定所述卡片的二维数组，设置所述二维数组中每个元素的长度信息为第三预设值，其中，所述二维数组的长度为所述卡片的第一布局信息的行数信息；

在所述二维数组中卡片数量增加的情况下，若检测到所述二维数组中每个元素的长度等于所述第三预设值，则确定所述二维数组中新增卡片的纵坐标的数值为所述第一布局信息的行数信息；

在所述二维数组中卡片数量增加的情况下，若检测到所述二维数组中目标元素的长度小于所述第三预设值，则根据所述目标元素的下标信息确定所述新增卡片的纵坐标的数值；

根据所述新增卡片的纵坐标的数值确定所述新增卡片的坐标信息；

所述变更后的第一布局信息按照所述新增卡片的坐标信息对所述卡片进行排列，以对所述卡片容器中卡片的布局进行优化。

6.一种卡片式布局的优化装置，其特征在于，包括：

第一删除单元，用于若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除，得到所述卡片的第一布局信息；

第一变更单元，用于对所述卡片的第一布局信息执行变更操作，得到变更后的第一布局信息，其中，所述变更操作至少包括所述卡片的位置信息进行变更、所述卡片的数量信息进行变更；

第一排列单元，用于基于所述变更后的第一布局信息对所述卡片进行排列，以对所述卡片容器中卡片的布局进行优化；

其中，所述装置还包括：第一判断单元，用于在若检测到网页的卡片容器中卡片的布局信息发生变化，对变化后的布局信息中的空白位置信息进行删除之前，判断当前卡片的布局信息与卡片的原始布局信息是否存在差异；

所述第一判断单元包括：第一获取模块，用于获取卡片容器中每个卡片的布局信息中的卡片的id信息；第二获取模块，用于通过每个卡片的id信息得到每个卡片的原始布局信息；第一判断模块，用于判断当前每个卡片的布局信息与每个卡片的原始布局信息是否存在差异；

若对卡片的位置信息进行变更时，所述第一排列单元包括：第一设置模块，用于设置第一布局信息中的目标移动卡片的坐标值，其中，设置目标移动卡片的横坐标的初始数值为第一预设值、设置目标移动卡片的纵坐标的初始数值为第二预设值；第一确定模块，用于若目标移动卡片的宽度等于卡片容器的宽度，则增加目标移动卡片的纵坐标的数值，确定目标移动卡片的横坐标的数值为第一预设值，获取目标移动卡片的第一坐标信息；第一排列模块，用于变更后的第一布局信息按照目标移动卡片的第一坐标信息对卡片进行排列，以对卡片容器中卡片的布局进行优化。

7.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至5中任意一项所述的方法。

8.一种计算机可读存储介质，其特征在于，所述存储介质包括存储的程序，其中，所述程序执行权利要求1至5中任意一项所述的方法。