CN108038117A - 一种网页布局方法及装置 - Google Patents

Abstract

一种网页布局方法及装置，用以解决现有技术中当用户对网页中的数据块进行操作后导致的网页的空间利用率下降的技术问题。该方法包括：浏览器客户端检测对网页进行的操作；其中，所述操作为向所述网页中添加第一显示对象的操作；所述浏览器客户端确定所述网页存在的多个空白区域中是否存在第一空白区域的面积大于等于所述第一显示对象所需占用的区域面积；其中，所述多个空白区域包括所述网页中包含的至少两个显示对象中任意相邻的两个显示对象之间的区域；所述浏览器客户端在确定结果为是时，将所述第一显示对象插入到所述第一空白区域对应的位置。

Description

一种网页布局方法及装置

技术领域

本发明涉及电子技术领域，尤其涉及一种网页布局方法及装置。

背景技术

随着互联网络技术的不断进步，网站作为互联网的主要内容供应者，也得到了长足的发展。为了满足用户的使用需求，在客户端浏览器中，可以通过使用javascript脚本，实现对网页中布局的显示对象，例如数据块、图片等，进行增加、删除或者移动的操作。

以网页中的显示对象为数据库为例，现有技术中，通过使用一个Javascript脚本对象，存储网页中各数据块的布局信息，例如，数据块的ID和数据块的坐标信息等，当用户对网页中的数据块进行操作后，则对该Javascript脚本对象中的数据进行更新。例如，当网页中增加了一个数据块后，则在该Javascript脚本对象中添加该数据块的ID、坐标信息等布局信息。如图1所示，网页中布局了3个数据块，分别为数据块1～数据块3，用户通过增加操作在网页中增加了数据块4，则客户端浏览器自动将数据块4放置在数据块3的右边或者下方，并在Javascript脚本对象中的增加数据块4的布局信息。当网页中删除了一个数据块后，则在该Javascript脚本对象中删除对应的数据块的布局信息。如图2所示，网页中布局了5个数据块，分别为数据块1～数据块5，当用户通过删除操作将数据块4删除，则客户端浏览器直接从Javascript脚本对象中删除数据块4的布局信息，其他数据块的布局信息保持不变。当然，用户还可以对网页中的各数据块进行移动操作，该移动操作的过程与增加操作和删除操作相似，在此不再赘述。

由图1～图2可知，当用户对网页中的数据块进行操作后，各个数据块之间可能会出现很大的空隙，例如，图1中数据块2和数据块3之间的空隙或者图2中删除数据块4后数据块3和数据块5之间的空隙，从而导致网页的空间利用率下降。

发明内容

本申请实施例提供一种网页布局方法及装置，用以解决现有技术中当用户对网页中的数据块进行操作后导致的网页的空间利用率下降的技术问题。

第一方面，本申请实施例提供一种网页布局方法，在该方法中，当浏览器客户端检测对网页进行的操作时，例如，该操作为向网页中添加第一显示对象的操作或者删除该网页中的显示对象的操作或者移动该网页中的显示对象的操作，该浏览器客户端则对该网页存在的多个空白区域进行判断，确定该网页存在的多个空白区域能够容纳待设置的显示对象，在该操作为添加第一显示对象的操作时，该空白区域为该网页中各个显示对象中任意相邻的两个显示对象之间的区域，该待设置的显示对象为该第一显示对象；在该操作为删除第一显示对象的操作时，该网页中存在由于删除第一显示对象后所空余出的空白区域面积，该空白区域为该网页中的至少三个显示对象中除该第一显示对象外的至少两个显示对象中任意相邻的两个显示对象之间的区域和/或该至少两个显示对象中的第一个显示对象与该网页的起始位置之间的区域，该待设置的显示对象为位于该第一显示对象后的第二显示对象；在该操作为移动第一显示对象的操作时，该网页中存在由于移动第一显示对象后所空余出的空白区域，该空白区域为该网页中的至少三个显示对象中位于该第一显示对象之前的显示对象及移动后的第一显示对象中任意相邻的两个显示对象之间的区域和/或移动后的第一显示对象与该网页的结束位置之间的区域，该待设置的显示对象为位于该第一显示对象后的第二显示对象，从而确定该网页中的多个空白区域中是否存在面积大于等于该待设置的显示对象占用的面积的第一空白区域，若存在该第一空白区域，则将该待设置的显示对象插入到该第一空白区域对应的位置。

在上述技术方案中，当浏览器客户端检测用户对网页进行的添加显示对象或者删除显示对象或者移动显示对象的操作后，会对该网页的空白区域进行检查，确定该网页的各个显示对象之间是否存在未被使用的，且能够容纳待设置的显示对象的空间，若有，则将该待设置的显示对象设置在该空白区域对应的位置，从而使浏览器客户端可以充分利用各个显示对象之间的空隙来布局显示对象，可以提高网页的空间利用率。

在一种可能的设计中，该浏览器客户端确定该网页存在的多个空白区域中是否存在所述第一空白区域时，首先对该网页进行网格化处理，然后确定该至少两个显示对象中每个显示对象在该网页中分别占据的单位网格的个数以及位置，最后根据每个显示对象在该网页中分别占据的单位网格的个数及位置，确定该多个空白区域中是否存在第一空白区域，从而浏览器客户端可以通过单位网格，从该网页中存在的多个空白区域中确定出设置第一显示对象的空白区域。

在一种可能的设计中，该浏览器客户端可以采用如下两种方式中的任意一种，从多个空白区域中确定出第一空白区域：

第一种方式：该浏览器客户端针对每个空白区域，根据构成该空白区域的相邻两个显示对象中占据的单位网格的行数的最大值、构成该空白区域的相邻两个显示对象的相邻两个边之间的未被占用的单位网格的列数、以及单位网格的面积，确定该空白区域的面积，然后，根据确定的每个空白区域的面积，将面积大于等于该第一显示对象所需占用的区域面积的其中一个空白区域作为该第一空白区域。

第二种方式：该浏览器客户端通过二维数组记录该至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数及位置，其中，该二维数组中的每一个元素表征一个单位网格，当该二维数组中的元素为1时表征与该元素对应的单位网格被占用，该二维数组中的元素为0时表征与该元素对应的单位网格未被占用，该二维数组的列数为固定列数，该二维数组的行数大于等于预设行数。然后，该浏览器客户端则根据该二维数组确定该第一空白区域，具体如下：

依次扫描该二维数组中的每一行中的元素，在确定位于所述二维数组的第i行第j个元素为0后，确定在该第i行中位于第j个元素之后的连续N-1个元素是否为0；其中，i为小于所述二维数组的总行数的整数，j为小于所述二维数组的总列数的整数，N由该第一显示对象的宽度确定，从而确定该网页中是否存在大于等于第一显示对象的宽度的空白区域。然后，在确定在该第i行中位于所述第j个元素之后的连续N-1个元素为0后，该浏览器客户端确定该二维数组在第i行之后的连续M-1行中从第j个元素起的连续N个元素是否为0，M由该第一显示对象的高度确定。当该二维数组在第i行之后的连续M-1行中从第j个元素起的连续N个元素为0，则该浏览器客户端确定该多个空白区域中存在该第一空白区域。从而，浏览器客户端只需要对二维数组进行扫描便能确定出第一空白区域，可以减少浏览器客户端的运算量。

在一种可能的设计中，该浏览器客户端首先获取该至少两个显示对象的信息、该网页的网格信息以及该网页的布局信息，该显示对象的信息包括该至少两个显示对象中每个显示对象的宽度、高度以及左上角顶点的位置，该网格信息为该网页包含的单位网格的行数及列数，该单位网格为根据该网页的高度值以及宽度值划分的，该布局信息为该至少两个显示对象放入该网页的先后顺序；然后，该浏览器客户端根据每个显示对象的信息、该布局信息以及该网格信息，确定并记录该至少两个显示对象中每个显示对象在该网页占据的单位网格的个数及位置。

在一种可能的设计中，该浏览器客户端通过一维数组记录该网页的布局信息，该一维数组的长度为该至少两个显示对象的个数，该一维数组中的元素为该至少两个显示对象中每个显示对象的编号，该一维数组中的元素按照该至少两个显示对象放入该网页的先后顺序进行排列。这样，当浏览器客户端需要使用该布局信息时，直接读取该一维数组即可，可以提高该浏览器客户端的处理效率。

在一种可能的设计中，当该操作为删除该第一显示对象的操作时，该第二显示对象为位于该第一显示对象之后的任意一个显示对象，或该第二显示对象为位于该第一显示对象之后的最后一个显示对象，这样，浏览器客户端可以采用多种方式对网页中的剩余显示对象的位置进行调整。

第二方面，本申请实施例提供了一种网页布局装置，该装置具有实现上述第一方面方法中浏览器客户端行为的功能。所述功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。该硬件或软件包括一个或多个与上述功能相对应的模块。

在一个可能的设计中，该装置的结构中包括处理器和存储器，该处理器被配置为支持该装置执行上述第一方面方法中相应的功能，该存储器用于与处理器耦合，其保存必要的程序指令和数据。

第三方面，本申请实施例提供了一种计算机存储介质，用于存储用于执行上述第一方面至第一方面的任意一种设计以及上述第一方面的功能所用的计算机软件指令，并包含用于执行上述第一方面的任意一种设计以及上述第一方面的方法所设计的程序。

第四方面，本申请实施例提供了一种计算机程序产品，该计算机程序产品包含有指令，当该指令在计算机上运行时，使得所述计算机执行上述第一方面的方法以及第一方面的任意一种设计。

第五方面，本申请实施例还提供了一种芯片系统，该芯片系统包括处理器，用于支持该网页布局装置实现上述第一方面所述的方法，例如，生成或处理上述方法中所涉及的数据和/或信息。在一种可能的设计中，该芯片系统还包括存储器，该存储器用于保存该网页布局装置必要的程序指令和数据。该芯片系统，可以由芯片构成，也可以包含芯片和其它分立器件。

附图说明

图1为现有技术的向网页中增加数据块的示意图；

图2为现有技术的删除网页中的数据块的示意图；

图3为本申请实施例中的浏览器客户端的技术架构的示意图；

图4为本申请实施例中提供的网页布局方法的流程图；

图5为本申请实施例中步骤402采用第一种方式确定空白区域的面积的示意图；

图6为本申请实施例中步骤402的具体实现方式流程图；

图7为本申请实施例中将网页划分成若干个单位网格的示意图；

图8为本申请实施例中确定数据块在该网页中分别占据的单位网格的个数及位置的示意图；

图9为本申请实施例中确定该网页中存在的多个空白区域的示意图；

图10为本申请实施例中采用二维数组记录数据块在该网页中分别占据的单位网格的个数及位置的示意图；

图11为本申请实施例中根据二维数组确定第一空白区域的示意图；

图12为本申请实施例中为数据块6确定第一空白区域的示意图；

图13为本申请实施例中增加数据块5后获得网页布局示意图；

图14为本申请实施例中提供的网页布局方法的另一流程图；

图15为本申请实施例中应用图13所示的网页布局方法的初始网页布局示意图；

图16为本申请实施例中提供的网页布局方法的另一流程图；

图17为本申请实施例中图12所示的网页布局方法中的空白区域的示意图；

图18为本申请实施例中采用图12所示的网页布局方法获得的网页布局的示意图；

图19为本申请实施例中提供的网页布局装置的结构框图；

图20为本申请实施例中提供的网页布局装置的另一结构框图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。

本申请实施例提供一种网页布局方法，该方法应用于浏览器客户端中。支持该浏览器客户端工作的技术架构如图3所示。浏览器客户端运行于电脑或移动设备的系统上，当浏览器客户端检测到用户的操作后，则生成相应的请求指令，通过网络连接向万维网(World Wide Web，Web)服务器发送该请求指令，获取与该请求指令对应的内容，并将该内容显示在浏览器客户端的页面上。该浏览器客户端可以是浏览器应用程序或者网络视图(WebView)组件，当然也可以是通过超文本标记语言(HyperText Markup Language，HTML)、层叠样式表(Cascading Style Sheets，CSS)、Javascript网页技术呈现视觉效果的应用，在本申请实施例中不作限制。

需要说明的是，上述描述中的电脑可以是运行在Wndows系统的电脑，也可以是运行在MAC OS系统的电脑，当然也可以是面向未来的计算机系统的电脑，本申请实施例描述的系统是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域普通技术人员可知，随着计算机系统的演变，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

上述描述中的移动终端，可以是向用户提供数据连通性的设备，例如可以包括具有无线连接功能的手持式设备、或连接到无线调制解调器的处理设备。该终端设备可以经无线接入网(Radio Access Network，RAN)与核心网进行通信，与RAN交换数据。该终端设备可以包括用户设备(User Equipment，UE)、无线终端设备、移动终端设备、远程终端设备(Remote Terminal)、接入终端设备(Access Terminal)、用户终端设备(User Terminal)或用户装备(User Device)等。例如，可以包括移动电话(或称为“蜂窝”电话)，具有移动终端设备的计算机，便携式、袖珍式、手持式、计算机内置的或者车载的移动装置，智能穿戴式设备等。例如，个人通信业务(Personal Communication Service，PCS)电话、无绳电话、个人数字助理(Personal Digital Assistant，PDA)、智能手表、智能头盔、智能眼镜、智能手环、等设备。

另外，本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，如无特殊说明，一般表示前后关联对象是一种“或”的关系。

由于现有技术中，当用户对网页中的显示对象进行操作后，会导致各个显示对象之间出现很大的空隙，降低网页的空间利用率，鉴于此，本申请实施例提供一种网页布局方法，在该方法中，当浏览器客户端检测对网页进行的操作时，例如，该操作为向网页中添加第一显示对象的操作或者删除该网页中的显示对象的操作或者移动该网页中的显示对象的操作，该浏览器客户端则对该网页存在的多个空白区域进行判断，确定该网页存在的多个空白区域能够容纳待设置的显示对象，该空白区域为该网页中各个显示对象中任意相邻的两个显示对象之间的区域和/或该空白区域为该网页中的第一个显示对象与网页的起始位置之间的区域，该待设置的显示对象可以为该第一显示对象或者位于该第一显示对象后的第二显示对象，从而确定该网页中的多个空白区域中是否存在面积大于等于该待设置的显示对象占用的面积的第一空白区域，若存在该第一空白区域，则将该待设置的显示对象插入到该第一空白区域对应的位置。

在上述技术方案中，当浏览器客户端检测用户对网页进行的添加显示对象或者删除显示对象或者移动显示对象的操作后，会对该网页的空白区域进行检查，确定该网页的各个显示对象之间是否存在未被使用的，且能够容纳待设置的显示对象的空间，若有，则将该待设置的显示对象设置在该空白区域对应的位置，从而使浏览器客户端可以充分利用各个显示对象之间的空隙来布局显示对象，可以提高网页的空间利用率。

下面将结合说明书附图以及具体的实施方式对本发明实施例中的技术方案进行详细的说明。

在下面的介绍过程中，将以本申请实施例提供的技术方案应用于浏览器客户端，在该浏览器客户端中显示门户(Portal)类型的网页，且该Portal类型的网页中的显示对象为数据块为例进行说明。在浏览器客户端的Portal网页中，显示多个数据块，如图1所示，Portal网页中显示4个数据块，其中，每个数据块可以表征使用浏览器客户端的用户的一个信息系统，例如，数据块1为报销系统，数据块2为考核系统，数据块3为会议系统以及数据块4为财务系统，从而可以通过浏览器客户端将用户的多个信息系统集成在一个Portal网页中。用户可以通过浏览器客户端在该Portal网页中增加或者删除或者移动各个数据块。

由于用户对网页的操作可以为添加数据块或者删除数据块或者移动数据块的操作，浏览器客户端对不同的操作有不同的处理方式，因此，为了能够清楚地说明本申请实施例提供的网页布局方法，将分别以三种不同的操作为例，对本申请实施例中的网页布局方法进行说明。

针对第一种操作：向浏览器客户端的Portal网页中添加第一数据块的操作，请参考图4，为本申请实施例提供的一种网页布局方法，该方法的流程描述如下：

步骤401：浏览器客户端检测对Portal网页进行的添加第一数据块的操作。

在具体实施过程中，以Portal网页中包含有如图1所示的4个数据块为例。用户可以通过在浏览器客户端的Javascript脚本对象中写入数据块5的相关信息的方式向该Portal网页中添加数据块5。该数据块5的相关信息可以包含数据块5的宽度、高度以及数据块编号等，在此不作限制。例如，数据块5的信息为：宽度2cm，高度2cm。此时，Protal浏览器的客户端检测到用户在Javascript脚本对象中的写入操作，确定用户对该Portal网页进行了添加数据块5的操作。

步骤402：浏览器客户端确定该Portal网页存在的多个空白区域中是否存在第一空白区域的面积大于等于该第一数据块所占用的区域面积。

在本申请实施例中，该多个空白区域为该Portal网页中包含的至少两个数据块中任意相邻的两个数据块之间的区域。例如，在图1所示的4个数据块之间，每两个数据块之间均存在空白区域，例如，数据块1和数据块2之间的空白区域1，数据块2和数据块3之间的空白区域2，数据块3和数据块4之间的空白区域3等。

在浏览器客户端中，存储有Portal网页中每个数据块的信息，其中，每个数据块的信息包含数据块的宽度、高度、数据块的左上角顶点的坐标以及数据块的编号。例如，浏览器客户端中存储的4个数据块的信息为：{ID：1；宽度：4cm；高度：2cm；左上角顶点坐标：(1,1)}、{ID：2；宽度：4cm；高度：2cm；左上角顶点坐标：(6,1)}、{ID：3；宽度：7cm；高度：2cm；左上角顶点坐标：(1,4)}、{ID：4；宽度：4cm；高度：2cm；左上角顶点坐标：(9,4)}。该4个数据块的信息可以是采用现有技术中的方法存储在Javascript脚本对象中，也可以是由浏览器客户端重新创建4个一维数组，将4个数据块的信息分别存储在这4个一维数组中，每个一维数组存储一个数据块的信息，每个一维数组的可以包含5个元素，分别对应每个数据块的ID、宽度、高度、左上角顶点横坐标、左上角顶点纵坐标，例如，数据块1对应的一维数组1为{1,4,2,1,1}，数据块2对应的一维数组2为{2,4,2,6,1}，以此类推，在此不再赘述。

在本申请实施例中，步骤402可以采用如下两种方式中的任意一种。

第一种方式：浏览器客户端根据其存储的各个数据块的信息确定出每个空白区域的面积，然后比较每个空白区域的面积与第一数据块所占用的面积的大小，确定是否存在第一空白区域。

具体来讲，浏览器客户端将相邻的两个数据块中前一个数据块的末端的位置与后一个数据块的起始端的位置之间的差值，作为该空白区域的宽度，相邻的两个数据块中数据块的高度的最大值作为该空白区域的高度，从而确定出相邻的两个数据块的空白区域的面积。

例如，数据块1的左上角顶点坐标为(1,1)，数据块1的宽度为4，则数据块1的末端所在的位置为宽度为5cm对应的位置，而数据块2的左上角顶点坐标为(6,1)，因此，确定出数据块2的起始端所在的位置为宽度为6cm对应的位置，从而确定出数据块1和数据块2之间的空白区域1的宽度为1cm。由于数据块1和数据块2的高度均为2cm，因此，该空白区域1的高度为2cm，最终确定出空白区域1的面积为(1*2)cm²，如图5所示。

对于空白区域2，由于数据块3的起始端所在的位置为该网页的起始位置，因此，空白区域2的宽度为数据块2的末端所在的位置与该Portal网页的结束位置之间的差值，假设该Portal网页的宽度为14cm，而数据块2的左上角顶点坐标为(6,1)，数据块2的宽度为4cm，因此，数据块2的末端所在的位置为宽度为10cm对应的位置，则空白区域2的宽度为4cm，由于数据块2的高度为2cm，因此，该空白区域2的面积为(4*2)cm²。空白区域3的面积的确定方式与空白区域1相同，在此不再赘述，根据上述方法确定出空白区域3的面积为(1*2)cm²，如图5所示。

当然了，通常情况下，为了便于用户使用，各个数据块之间会留有一定的间隙，例如，各个数据块之间需留有宽度为1cm的间隙，从而，当浏览器客户端在确定空白区域时，还可以对空白区域的宽度进行判断，若大于该间隙，则表示该空白区域能够用来设置数据块；如该空白区域的宽度等于该间隙，则表示该空白区域实际实际为数据块之间预留的间隙，则该空白区域不能用于设置数据块，从而浏览器客户端可以确定出Portal网页中能够用于设置数据块的空白区域。例如，空白区域1及空白区域3的宽度为1cm，等于数据块之间的间隙的宽度，因此，空白区域1及空白区域3不能用于设置数据块，因此，浏览器客户端只能从空白区域2中确定第一空白区域。

由于空白区域2的面积为(4*2)cm²，浏览器客户端通过数据块5的信息，确定出数据块5所占用的面积为(2*2)cm²，因此，确定出空白区域2为第一空白区域。

第二种方式：浏览器客户端首先将Portal网页网格化，从而将Portal网页划分成多个单位网格，然后根据存储的各个数据块的信息，确定出每个数据块在网格化的网页中分别占据的单位网格的个数以及位置，最后根据每个数据块在网格化的Portal网页中分别占据的单位网格的个数以及位置，确定出Portal网页的多个空白区域中是否存在第一空白区域。

具体来讲，请参考图6，步骤402的具体实现步骤如下：

步骤601：浏览器客户端将Portal网页网格化。

具体来讲，浏览器客户端首先需要确定Portal网页的布局范围，例如，该Portal网页的布局范围可以是使用该浏览器客户端的设备的屏幕长度和宽度或者为一个预设的长度值和宽度值，例如，该Portal网页的布局范围为13cm*10cm。然后，浏览器客户端使用一个预设的宽度值和预设的高度值对该Portal网页进行单位网格的划分。例如，以1cm为一个单元宽度，2cm为一个单元高度，从而将该网页划分为13*5个单位网格，如图6所示。

需要说明的是，由于各个数据块之间可能存在一定的间隙，因此，在进行单位网格划分时，确定的单元宽度还可以考虑数据块之间的间隙，例如，单位网格的单元宽度可以是一个预设的宽度值与数据块之间的间隙的和值。当Portal网页的布局范围的宽度不能够被单元宽度整除时，则需要向下取整，例如，当单元宽度为2cm且网页的布局范围为13cm*10cm，13无法被2整除，因此，该Portal网页的每一行有6个单位网格。另外，需要说明的是，Portal网页的高度可以是无线向下延伸的，因此，对于高度值为一个任意的高度，在本申请实施例中，以该Portal网页的布局范围包含5行单位网格为例进行说明。

步骤602：浏览器客户端确定每个数据块在该Portal网页占据的单位网格的个数以及位置。

在本申请实施例中，步骤602的具体实现方式如下：

1、浏览器客户端获取每个数据块的信息及该Portal网页的网格信息。

具体来讲，每个数据块的信息包括每个数据块的宽度、高度以及左上角顶点的位置，与步骤402中每个数据块的信息相同，在此不再赘述。该Portal网页的网格信息包括该Portal网页包含的单位网格的行数及列数，以及单位网格的单元高度值以及单元宽度值。浏览器客户端通过访问存储介质，获取上述信息。

2、浏览器客户端获取该Portal网页的布局信息。

在本申请实施例中，该布局信息为每个数据块放入该Portal网页的先后顺序。例如，4个数据块放入该Portal网页的顺序依次为数据块1、数据块2、数据块3以及数据块4，则该Portal网页的布局信息为1、2、3、4。在具体实施过程中，浏览器客户端也可以使用一维数组来记录该布局信息。该一维数组的长度为数据块的个数，例如为4，该一维数组中的元素为每个数据块的编号，该一维数组中的元素按照每个数据块放入该网页的先后顺序进行排列。例如，如图1所示的网页，相应的布局信息为一维数组{1，2，3，4}。则当浏览器客户端需要获取该布局信息时，则直接读取该一维数组即可。

3、浏览器客户端根据每个数据块的信息、该布局信息以及该网格信息，确定并记录每个数据块在该Portal网页中分别占据的单位网格的个数及位置。

当浏览器客户端获取上述信息后，则根据上述信息确定出每个数据块在该Portal网页占据的单位网格的个数及位置。例如，该Portal网页的单位网格为13*5个，且每个单位网格的单元宽度为1cm，单元高度为2cm，根据该Portal网页的布局信息可知，该Portal网页的第一个数据块为数据块1，数据块1的宽度为4cm，高度为2cm，从而确定出数据块1占据的网格为第一行中的前4个单位网格；该Portal网页的第二个数据块为数据块2，数据块2的宽度为4cm，高度为2cm，从而确定出数据块2占据的网格为第一行中的第5到第8个单位网格，以此类推，从而确定出4个数据块在该Portal网页中分别占据的单位网格的个数及位置，如图8所示。

需要说明的是，步骤602的具体实现过程可以是在浏览器客户端执行本申请实施例中的方法之前执行的，即，当Portal网页中设置一个数据块，浏览器客户端则采用步骤602中的方法确定并记录该数据块在Portal网页中占据的单位网格的个数及位置，从而，当浏览器客户端在执行步骤602时，则直接从存储单元中读取数据块在Portal网页中占据的单位网格的个数及位置即可。

步骤603：浏览器客户端根据每个数据块在该Portal网页占据的单位网格的个数以及位置，确定该Portal网页中存在的多个空白区域中是否存在第一空白区域。

在本申请实施例中，步骤603有两种具体实现方式，浏览器客户端可以采用任意一种：

第一种方式：浏览器客户端针对每个空白区域，根据构成该空白区域的相邻两个数据块中占据的单位网格的行数的最大值、构成该空白区域的相邻两个数据块的相邻两个边之间的未被占用的单位网格的列数、以及单位网格的面积，确定该空白区域的面积，然后，根据确定的每个空白区域的面积，将面积大于等于该第一数据块所需占用的区域面积的其中一个空白区域作为第一空白区域，否则，确定该多个空白区域中不存在第一空白区域。

具体来讲，当浏览器客户端确定出每个数据块在单位网格的个数以及位置后，则确定由未被占用的单位网格构成的区域为该网页中的空白区域。例如，如图9所示，第一行的单位网格中存在第一个空白区域，该第一个空白区域由第一行的第9到第13个单位网格组成，即第一个空白区域的面积为5个单位网格；第二行的单位网格中存在第二个空白区域，该第二个空白区域由第二行的第12到第13个单位网格组成，即第二个空白区域的面积为2个单位网格。由于每个单位网格的单元宽度为1cm，单元高度为2cm，数据块5的宽度和高度均为2cm，因此，数据块5所需的单位网格为2个连续的单位网格，小于该第一个空白区域的面积，且等于第二个空白区域的面积，因此，第一个空白区域和第二个空白区域均可以为该第一空白区域，浏览器客户端可以从中选择任意一个作为第一空白区域，在此不作限制。

第二种方式：浏览器客户端可以通过二维数组记录该Portal网页中每个数据块占据的单位网格的个数及位置，则浏览器客户端通过扫描该二维数组中的元素来确定该Portal网页的多个空白区域中是否存在第一空白区域。

具体来讲，用于记录该Portal网页中每个数据块占据的单位网格的个数及位置的二维数组中，每一个元素表征一个单位网格，当该二维数组中的元素为1时表征与该元素对应的单位网格被占用，该二维数组中的元素为0时表征与该元素对应的单位网格未被占用，该二维数组的列数为固定列数，即为浏览器客户端根据单元宽度确定的每一行中的单位网格的个数，例如为13，该二维数组的行数大于等于预设行数，该预设行数为浏览器客户端确定的该网页包括的单位网格的行数，例如为5。具体来讲，根据图7可知，用于记录该Portal网页中每个数据块占据的单位网格的个数及位置的二维数组为{1,1,1,1,1,1,1,1,0,0,0,0,0；1,1,1,1,1,1,1,1,1,1,1,0,0；0,0,0,0,0,0,0,0,0,0,0,0,0；0,0,0,0,0,0,0,0,0,0,0,0,0；0,0,0,0,0,0,0,0,0,0，0,0,0}，如图10所示。

然后，浏览器客户端以行为单位，依次扫描位于该二维数组的每一行中的元素，从该二维数组的第一行的第一个元素开始，确定第一行中的元素是否为0，当浏览器客户端确定位于该二维数组的第i行第j个元素为0，其中，i为小于该二维数组的总行数的整数，j为小于该二维数组的总列数的整数，例如，如图8所示的二维数组中，第一行第9个元素为0，然后确定在该第i行中位于第j个元素之后的连续N-1个元素是否为0，N由该第一显示对象的宽度确定。例如，第一显示对象为数据块5，由于数据块5的宽度为2cm，单位网格的单元宽度为1cm，因此，确定数据块5需要占用网页的宽度为2个单位网格的宽度，则N为2，从而确定在第一行第9个元素后的一个元素是否也为0。在确定在该第i行中位于该第j个元素之后的连续N-1个元素为0后，浏览器客户端确定该二维数组在第i行之后的连续M-1行中从第j个元素起的连续N个元素是否为0，M由该第一显示对象的高度确定。例如，浏览器客户端确定第一行第9个元素以及第一行第10个元素为0，则确定该二维数组中从第二行的第9个元素和第10个元素起的M-1行的第9个元素和第10个元素是否都为0，若是，则存在第一空白区域。具体来讲，由于数据块5的高度为2cm，单位网格的单元高度为2cm，因此，确定数据块5需要占用网页的高度为1个单位网格的高度，则M为1，从而浏览器客户端确定出第一行第9个元素以及第一行第10个元素为0后，则确定该多个空白区域中存在第一空白区域，在这种情况下，如图11所示，可以将第一行第9个元素以及第一行第10个元素对应的区域作为第一空白区域。

为了更加清楚地说明浏览器客户端的扫描过程，以第一数据块为数据块6为例进行说明，数据块6的宽度为2cm，高度为4cm，则数据块6需要占用的宽度为2个单位网格对应的宽度，需要占用的高度为2个单位网格对应的高度，则浏览器客户端确定第一行第9个元素以及第一行第10个元素为0后，还需确定该二维数组中从第二行的第9个元素和第10个元素是否为0，此时第二行的第9个元素和第10个元素不为0，则浏览器客户端从第一行的第10个元素开始重新扫描，浏览器客户端确定第一行第10个元素和第11个元素为0，然后确定第二行中的第10个元素及第11个元素不为0，则从第一行的第11个元素起重新扫描，从而最终确定出第一行的第12个元素和第13个元素为0，第二行的第12个元素和第13个元素为0，从而确定出第一空白区域，如图12所示。

当数据块为其它宽度和高度时，采用上述相同的方式进行判断，在此不再赘述。

步骤403：浏览器客户端在确定结果为是时，将该第一数据块插入到该第一空白区域对应的位置。

当浏览器客户端确定出第一空白区域后，例如，第一空白区域为第一行的第9个元素和第10个元素构成的区域，则浏览器客户端将数据块5设置在该区域，如图13所示。

当浏览器客户端采用步骤402中的第二种方式确定第一空白区域，则当浏览器客户端将数据块5设置在第一空白区域后，则在记录布局信息的一维数组中增加数据块5的ID，且，确定出数据块5的左上角的顶点位置，例如，数据块5的顶点坐标为(11,0)，并新建一个一维数组，记录数据块5的信息，完成添加数据块5的过程。

当然，若浏览器客户端确定该Portal网页中不存在第一空白区域，则浏览器客户端则采用现有技术中的布局方式，将数据块5设置在数据块4的右方或者下方，数据块5的具体位置由数据块4的末端位置与Portal网页的结束位置的差值决定，当该差值大于数据块5的宽度时，则将数据块5设置在数据块4的右方，否则，则将数据块5设置在数据块4的下方，在此不再赘述。

当记录该Portal网页中每个数据块占据的单位网格的个数及位置的二维数组的预设行数中的元素已经全部被使用时，例如，二维数组的5行元素均被占用，则浏览器客户端可以增加该二维数组的行数，并将增加的行中的元素全部设置为0，以供增加新的数据块。

针对第二种操作：删除浏览器客户端的Portal网页中的第一数据块的操作，请参考图14，第一数据块及第二数据块分别为该Portal网页中显示的数据块为例，该方法的流程图如下：

步骤1401：浏览器客户端检测删除Portal网页中包含的至少三个数据块中的第一数据块的操作。

在具体实施过程中，以Portal网页中包含有如图15所示的5个数据块为例。用户可以通过在浏览器客户端的Javascript脚本对象中将某一数据块的相关信息删除的方式删除该网页中对应的数据块，例如，用户删除数据块8的相关信息，此时，浏览器的客户端检测到用户在Javascript脚本对象中的删除操作，确定用户需要删除该Portal网页中的数据块8。

步骤1402：在进行该操作后，浏览器客户端确定该Portal网页中由于删除该第一数据块后所空余出的空白区域面积是否大于等于该至少三个数据块中位于该第一数据块之后的第二数据块所占用的区域面积。

在本申请实施例中，在删除第一数据块后，该Portal网页的空白区域为该至少三个数据块中除该第一数据块外的至少两个数据块中任意相邻的两个数据块之间的区域和/或该至少两个数据块中的第一个数据块与该网页的起始位置之间的区域。例如，当删除的数据块为网页中的第一个数据块，例如，图15中的数据块7，则数据块7所占用的区域则为空白区域，该空白区域为删除数据块7后Portal网页中的第一个数据块与Portal网页的起始位置之间的区域，即数据块8与Portal网页的起始位置之间的区域。当删除的数据块不为Portal网页中的第一个数据块，例如，删除图15中的数据块8，则该Portal网页中的空白区域即为该Portal网页中剩下的数据块之间的区域。在本申请实施例中，以删除的数据块为数据块8为例进行说明。

当删除的数据块为数据块8时，该Portal网页中的空白区域包括数据块7与数据块9之间的空白区域4，数据块9和数据块10之间的空白区域5。由于数据块10的末端位于该Portal网页的结束位置，数据块11的起始端位于该Portal网页的起始位置，因此，数据块10和数据块11之间不存在空白区域。其中，每个空白区域的面积的确定方法与步骤402中相同，在此不再赘述。

当浏览器客户端确定出该Portal网页中的空白区域后，则对该Portal网页中的位于第一数据块之后的第二数据块的位置进行调整。在本申请实施例中，第二数据块为位于该第一数据块之后的任意一个数据块，或该第二数据块为位于该第一数据块之后的最后一个数据块。例如，删除数据块8之后，浏览器客户端可以依次对数据块9至数据块11的位置进行调整，也可以从该Portal网页中的数据块11开始，对每个数据块的位置进行调整。下面对这两种不同的调整方式进行说明。

第一种调整方式：浏览器客户端依次对数据块9至数据块11的位置进行调整。

以调整数据块9的位置为例，浏览器客户端可以采用步骤402中的方法确定该Portal网页中各个空白区域的面积是否大于等于数据块9所占用的区域面积，在此不再赘述。

步骤1403：在确定该空白区域大于等于该第二数据块所占用的区域时，浏览器客户端将该第二数据块移动到该空白区域的位置。

当浏览器客户端确定出空白区域4的面积大于数据块9所占用的区域面积时，浏览器客户端则确定数据块9的位置为空白区域4的对应的位置，则将数据块9移动到空白区域4中。此时，浏览器客户端需要重新确定数据块9的左上角顶点坐标，具体确定方式与步骤403相同，在此不再赘述。

当浏览器客户端重新确定数据块9的位置后，由于数据块9原来占据的位置被空余出来，又出现新的空白区域，则针对数据块9进行移动后，浏览器客户端还需重复执行步骤1402～步骤1403，重新确定数据块10和数据块11的位置，以便依次将数据块10和数据块11分别向前移动，以充分利用网页空白区域，提高网页占用率。

第二种调整方式：浏览器客户端从该数据块11开始，对每个数据块的位置进行调整。

由于删除数据块8后，该Portal网页中的空白区域增加了数据块8原来占用的区域，若该Portal网页中的最后一个数据块能够占用数据块8的区域，则浏览器客户端可以在不增加较大的计算量的前提下，使整个Portal网页的布局达到紧凑的效果。因此，浏览器客户端可以从最后一个数据块开始，来调整每个数据块的位置。具体来讲，浏览器客户端首先确定空白区域的面积是否大于等于数据块11所占用的区域面积，例如，空白区域4和空白区域5的总面积是否大于等于数据块11所占用的区域面积，若是，浏览器客户端则确定数据块11的位置为空白区域4以及空白区域5的对应的位置，从而将数据块11移动到空白区域4以及空白区域5中。

需要说明的是，若浏览器客户端采用步骤402中的第二种方式确定空白区域时，当删除第一数据块后，浏览器客户端需要删除用于记录布局信息的一维数组中对应的数据块的编号，使该一维数组的长度减1，且，将用于记录每个数据块占用的单位网格的个数以及位置的二维数组中，与该删除的数据块对应的二维数组的元素设置为0。

针对第三种操作：移动浏览器客户端的Portal网页中的第一数据块的操作，请参考图16，为本申请实施例提供的一种网页布局方法，以该方法应用于浏览器客户端，第一数据块及第二数据块分别为该Protal网页中显示的数据块为例，该方法的流程图如下：

步骤1601：浏览器客户端检测移动Portal网页中包含的至少三个数据块中的第一数据块的操作。

在具体实施过程中，以Portal网页中包含有如图14所示的5个数据块为例。用户可以通过在Portal网页中拖拽并释放一个数据块来移动该数据块，例如，Protal浏览器客户端检测用户通过鼠标左键选择数据块10，然后一直按压鼠标左键不放松并改变光标的位置，当检测用户放开鼠标左键时，则确定将数据块10移动到释放鼠标左键时光标对应的位置。在确定数据块移动的位置时，可以采用碰撞检测的方式，确定释放鼠标左键时光标所在的位置是否在该位置的原数据块的左上角顶点的横坐标之前，例如，确定释放数据块10时，光标位于数据块8的左上角顶点的横坐标之前，则确定将数据块10移动到数据块8之前，若光标位于数据块8的左上角顶点的横坐标之后，则确定将数据块10移动到数据块9之前，当然，本领域技术人员还可以采用其他方式确定移动的数据块的位置，在此不作限制。

以将数据块10移动到数据块8之前为例，当浏览器客户端确定将数据块10移动到数据块8之前后，则对数据块7与Portal网页的结束位置之间的区域进行判断，确定是否能够容纳数据块10，由于数据块10的宽度大于该区域的宽度，因此，确定将数据块10放置到数据块7的下方。

步骤1602：在进行该操作后，浏览器客户端确定该Portal网页中由于移动第一数据块后所空余出的空白区域面积是否大于等于该至少三个数据块中位于该第一数据块之后的第二数据块所占用的区域面积。

在本申请实施例中，在删除第一数据块后，该Portal网页的空白区域为该至少三个数据块中位于所述第一数据块之前的数据块及移动后的第一数据块中任意相邻的两个数据块之间的区域和/或移动后的第一数据块与该Portal网页的结束位置之间的区域。例如，将数据块10放置到数据块7的下方后，该Portal网页的空白区域为数据块7与数据块10之间的区域，如图17所示。

当浏览器客户端确定出该Portal网页中的空白区域后，则对该Portal网页中的位于第一数据块之后的第二数据块的位置进行调整。在本申请实施例中，第二数据块为位于该第一数据块之后的任意一个数据块，或该第二数据块为位于该第一数据块之后的最后一个数据块。例如，删除数据块8之后，浏览器客户端可以依次对数据块8、数据块9以及数据块11的位置进行调整，也可以从该网页中的数据块11开始，对每个数据块的位置进行调整。

步骤1603：在确定该空白区域大于等于该第二数据块所占用的区域时，浏览器客户端将该第二数据块移动到该空白区域的位置。

步骤1602～步骤1603的具体实现过程与步骤1402～步骤1403中相同，在此不再赘述。当浏览器客户端重新确定各个数据块的位置后，得到如图18所示的网页布局。

在上述技术方案中，当浏览器客户端检测用户对网页进行的添加显示对象或者删除显示对象或者移动显示对象的操作后，会对该网页的空白区域进行检查，确定该网页的各个显示对象之间是否存在未被使用的，且能够容纳待设置的显示对象的空间，若有，则将该待设置的显示对象设置在该空白区域对应的位置，从而使浏览器客户端可以充分利用各个显示对象之间的空隙来布局显示对象，可以提高网页的空间利用率。

上述本申请提供的实施例中，从浏览器客户端的角度对本申请实施例提供的网页布局方法进行了介绍。可以理解的是，浏览器客户端为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

图19示出了网页布局装置1900的一种可能的结构示意图。该网页布局装置1900可以实现上文中涉及的浏览器客户端的功能。该网页布局装置1900可以包括检测模块1901、确定模块1902和执行模块1903。其中，检测模块1901可以用于执行图4所示的实施例中的步骤401、图14所示的实施例中的步骤1401以及图16所示的实施例中的步骤1601，确定模块1902可以用于执行图4所示的实施例中的步骤402、图14所示的实施例中的步骤1402以及图16所示的实施例中的步骤1602，执行模块1903可以用于执行图4所示的实施例中的步骤403、图14所示的实施例中的步骤1403以及图16所示的实施例中的步骤1603，和/或用于支持本文所描述的技术的其它过程。其中，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。

在本申请实施例中，网页布局装置1900可以采用功能划分各个功能模块的形式来呈现，或者，可以采用集成的方式划分各个功能模块的形式来呈现。这里的“模块”可以指特定应用集成电路(application-specific integrated circuit，ASIC)，执行一个或多个软件或固件程序的处理器和存储器，集成逻辑电路，和/或其他可以提供上述功能的器件。

在一个简单的实施例中，本领域的技术人员可以想到，还可以将网页布局装置1900通过如图20所示的结构实现。

如图20所示，网页布局装置2000可以包括：存储器2001、处理器2002以及系统总线2003。其中，处理器2002以及存储器2001通过系统总线2003连接。存储器2001用于存储计算机执行指令，当网页布局装置2000运行时，处理器2002执行存储器2001存储的计算机执行指令，以使网页布局装置2000执行图4、图14以及图16所示的实施例提供的网页布局方法。具体的网页布局方法可参考上文及附图中的相关描述，此处不再赘述。

在一个示例中，检测模块1901、确定模块1902以及执行模块1903可以以硬件形式/软件形式内嵌于或独立于网页布局装置2000的存储器2001中。

可选地，所述存储器2001可以包括易失性存储器，例如RAM；存储器2001也可以包括非易失性存储器，例如快闪存储器，HDD或SSD)。存储器2001还可以包括上述种类的存储器的组合。

可选地，所述处理器2002可以是CPU，NP或者CPU和NP的组合。处理器2002还可以进一步包括硬件芯片。上述硬件芯片可以是ASIC，PLD或其组合。上述PLD可以是CPLD，FPGA，GAL或其任意组合

可选地，所述系统总线2003可以是PCI总线或EIS总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图20中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。当然，可以将系统总线2003用其他的连接结构进行替换，例如星型结构等，在本申请实施例中不作限制。

可选的，网页布局装置2000可以是现场可编程门阵列(field-programmable gatearray，FPGA)，专用集成芯片(application specific integrated circuit，ASIC)，系统芯片(system on chip，SoC)，中央处理器(central processor unit，CPU)，网络处理器(network processor，NP)，数字信号处理电路(digital signal processor，DSP)，微控制器(micro controller unit，MCU)，还可以采用可编程控制器(programmable logicdevice，PLD)或其他集成芯片。

本申请所提供的网页布局装置可以是一种芯片系统，所述芯片系统中可以包含至少一个芯片，也可以包含其他分立器件。所述芯片系统可以置于网页布局装置中，支持所述网页布局装置完成本申请实施例中所提供的网页布局方法。

本申请实施例提供一种计算机存储介质，所述计算机存储介质中存储有指令，当所述指令在计算机上运行时，使得所述计算机执行前述网页布局方法。

本申请实施例提供一种计算机程序产品，所述计算机程序产品包含有指令，当所述指令在计算机上运行时，使得所述计算机执行前述网页布局方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如，固态硬盘SolidState Disk(SSD))等。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (20)

1.一种网页布局方法，其特征在于，包括：

浏览器客户端检测对网页进行的操作；其中，所述操作为向所述网页中添加第一显示对象的操作；

所述浏览器客户端确定所述网页存在的多个空白区域中是否存在第一空白区域的面积大于等于所述第一显示对象所需占用的区域面积；其中，所述多个空白区域包括所述网页中包含的至少两个显示对象中任意相邻的两个显示对象之间的区域；

所述浏览器客户端在确定结果为是时，将所述第一显示对象插入到所述第一空白区域对应的位置。

2.根据权利要求1所述的方法，其特征在于，所述浏览器客户端确定所述网页存在的多个空白区域中是否存在所述第一空白区域，包括：

所述浏览器客户端对所述网页进行网格化处理；

所述浏览器客户端确定所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数以及位置；

所述浏览器客户端根据所述每个显示对象在所述网页中分别占据的单位网格的个数及位置，确定所述多个空白区域中是否存在所述第一空白区域。

3.根据权利要求2所述的方法，其特征在于，所述浏览器客户端根据所述每个显示对象在所述网页中分别占据的单位网格的个数及位置，确定所述多个空白区域中存在所述第一空白区域，包括：

所述浏览器客户端针对每个空白区域，根据构成该空白区域的相邻两个显示对象中占据的单位网格的行数的最大值、构成该空白区域的相邻两个显示对象的相邻两个边之间的未被占用的单位网格的列数、以及单位网格的面积，确定该空白区域的面积；

所述浏览器客户端根据确定的每个空白区域的面积，将面积大于等于所述第一显示对象所需占用的区域面积的其中一个空白区域作为所述第一空白区域。

4.根据权利要求2所述的方法，其特征在于，所述浏览器客户端确定所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数以及位置，包括：

所述浏览器客户端通过二维数组记录所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数及位置，所述二维数组中的每一个元素表征一个单位网格，当所述二维数组中的元素为1时表征与所述元素对应的单位网格被占用，所述二维数组中的元素为0时表征与所述元素对应的单位网格未被占用，所述二维数组的列数为固定列数，所述二维数组的行数大于等于预设行数。

5.根据权利要求4所述的方法，其特征在于，所述浏览器客户端根据所述每个显示对象在所述网页中分别占据的单位网格的个数及位置，确定所述多个空白区域中存在所述第一空白区域，包括：

所述浏览器客户端依次扫描所述二维数组中的每一行中的元素；

所述浏览器客户端确定位于所述二维数组的第i行第j个元素为0；其中，i为小于所述二维数组的总行数的整数，j为小于所述二维数组的总列数的整数；

所述浏览器客户端确定在所述第i行中位于第j个元素之后的连续N-1个元素是否为0；其中，N由所述第一显示对象的宽度确定；

在确定在所述第i行中位于所述第j个元素之后的连续N-1个元素为0后，所述浏览器客户端确定所述二维数组在第i行之后的连续M-1行中从第j个元素起的连续N个元素是否为0；其中，M由所述第一显示对象的高度确定；

在确定所述二维数组在第i行之后的连续M-1行中从第j个元素起的连续N个元素为0后，所述浏览器客户端确定所述多个空白区域中存在所述第一空白区域。

6.根据权利要求2所述的方法，其特征在于，所述浏览器客户端确定所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数以及位置，包括：

所述浏览器客户端获取所述至少两个显示对象的信息及所述网页的网格信息；其中，所述显示对象的信息包括所述至少两个显示对象中每个显示对象的宽度、高度以及左上角顶点的位置，所述网格信息为所述网页包含的单位网格的行数及列数，所述单位网格为根据所述网页的高度值以及宽度值划分的；

所述浏览器客户端获取所述网页的布局信息；其中，所述布局信息为所述至少两个显示对象放入所述网页的先后顺序；

所述浏览器客户端根据所述每个显示对象的信息、所述布局信息以及所述网格信息，确定并记录所述至少两个显示对象中每个显示对象在所述网页占据的单位网格的个数及位置。

7.根据权利要求6所述的方法，其特征在于，所述浏览器客户端通过一维数组记录所述网页的布局信息，所述一维数组的长度为所述至少两个显示对象的个数，所述一维数组中的元素为所述至少两个显示对象中每个显示对象的编号，所述一维数组中的元素按照所述至少两个显示对象放入所述网页的先后顺序进行排列。

8.一种网页布局方法，其特征在于，包括：

浏览器客户端检测对网页进行的操作；其中，所述操作为删除所述网页中包含的至少三个显示对象中的第一显示对象的操作；

在进行所述操作后，所述浏览器客户端确定所述网页中由于删除第一显示对象后所空余出的空白区域面积是否大于等于所述至少三个显示对象中位于所述第一显示对象之后的第二显示对象所占用的区域面积；其中，所述空白区域为所述至少三个显示对象中除所述第一显示对象外的至少两个显示对象中任意相邻的两个显示对象之间的区域和/或所述至少两个显示对象中的第一个显示对象与所述网页的起始位置之间的区域；

所述浏览器客户端在确定结果为是时，将所述第二显示对象移动到所述空白区域的位置。

9.根据权利要求8所述的方法，其特征在于，所述第二显示对象为位于所述第一显示对象之后的任意一个显示对象，或所述第二显示对象为位于所述第一显示对象之后的最后一个显示对象。

10.一种网页布局方法，其特征在于，包括：

浏览器客户端检测对网页进行的操作；其中，所述操作为移动所述网页中包含的至少三个显示对象中的第一显示对象的操作；

在进行所述操作后，所述浏览器客户端确定所述网页中由于移动第一显示对象后所空余出的空白区域面积是否大于等于所述至少三个显示对象中位于所述第一显示对象之后的第二显示对象所占用的区域面积；其中，所述空白区域为所述至少三个显示对象中位于所述第一显示对象之前的显示对象及移动后的第一显示对象中任意相邻的两个显示对象之间的区域和/或移动后的第一显示对象与所述网页的结束位置之间的区域；

所述浏览器客户端在确定结果为是时，将所述第二显示对象移动到所述空白区域的位置。

11.一种网页布局装置，其特征在于，包括：

检测模块，用于检测对网页进行的操作；其中，所述操作为向所述网页中添加第一显示对象的操作；

确定模块，用于确定所述网页存在的多个空白区域中是否存在第一空白区域的面积大于等于所述第一显示对象所需占用的区域面积；其中，所述多个空白区域包括所述网页中包含的至少两个显示对象中任意相邻的两个显示对象之间的区域；

执行模块，用于在确定结果为是时，将所述第一显示对象插入到所述第一空白区域对应的位置。

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

对所述网页进行网格化处理；

确定所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数以及位置；

根据所述每个显示对象在所述网页中分别占据的单位网格的个数及位置，确定所述多个空白区域中是否存在所述第一空白区域。

13.根据权利要求12所述的装置，其特征在于，所述确定模块根据所述每个显示对象在所述网页中分别占据的单位网格的个数及位置，确定所述多个空白区域中是否存在所述第一空白区域时，具体用于：

针对每个空白区域，根据构成该空白区域的相邻两个显示对象中占据的单位网格的行数的最大值、构成该空白区域的相邻两个显示对象的相邻两个边之间的未被占用的单位网格的列数、以及单位网格的面积，确定该空白区域的面积；

根据确定的每个空白区域的面积，将面积大于等于所述第一显示对象所需占用的区域面积的其中一个空白区域作为所述第一空白区域。

14.根据权利要求12所述的装置，其特征在于，所述确定模块确定所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数以及位置时，具体用于：

通过二维数组记录所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数及位置，所述二维数组中的每一个元素表征一个单位网格，当所述二维数组中的元素为1时表征与所述元素对应的单位网格被占用，所述二维数组中的元素为0时表征与所述元素对应的单位网格未被占用，所述二维数组的列数为固定列数，所述二维数组的行数大于等于预设行数。

15.根据权利要求14所述的装置，其特征在于，所述确定模块根据所述每个显示对象在所述网页中分别占据的单位网格的个数及位置，确定所述多个空白区域中是否存在所述第一空白区域时，具体用于：

依次扫描所述二维数组中的每一行中的元素；

确定位于所述二维数组的第i行第j个元素为0；其中，i为小于所述二维数组的总行数的整数，j为小于所述二维数组的总列数的整数；

确定在所述第i行中位于第j个元素之后的连续N-1个元素是否为0；其中，N由所述第一显示对象的宽度确定；

在确定在所述第i行中位于所述第j个元素之后的连续N-1个元素为0后，确定所述二维数组在第i行之后的连续M-1行中从第j个元素起的连续N个元素是否为0；其中，M由所述第一显示对象的高度确定；

在确定所述二维数组在第i行之后的连续M-1行中从第j个元素起的连续N个元素为0后，确定所述多个空白区域中存在所述第一空白区域。

16.根据权利要求12所述的装置，其特征在于，所述确定模块确定所述至少两个显示对象中每个显示对象在所述网页中分别占据的单位网格的个数以及位置时，具体用于：

获取所述至少两个显示对象的信息及所述网页的网格信息；其中，所述显示对象的信息包括所述至少两个显示对象中每个显示对象的宽度、高度以及左上角顶点的位置，所述网格信息为所述网页包含的单位网格的行数及列数，所述单位网格为根据所述网页的高度值以及宽度值划分的；

获取所述网页的布局信息；其中，所述布局信息为所述至少两个显示对象放入所述网页的先后顺序；

根据所述每个显示对象的信息、所述布局信息以及所述网格信息，确定并记录所述至少两个显示对象中每个显示对象在所述网页占据的单位网格的个数及位置。

17.根据权利要求16所述的装置，其特征在于，所述确定模块具体通过一维数组记录所述网页的布局信息，所述一维数组的长度为所述至少两个显示对象的个数，所述一维数组中的元素为所述至少两个显示对象中每个显示对象的编号，所述一维数组中的元素按照所述至少两个显示对象放入所述网页的先后顺序进行排列。

18.一种网页布局装置，其特征在于，包括：

检测模块，用于检测对网页进行的操作；其中，所述操作为删除所述网页中包含的至少三个显示对象中的第一显示对象的操作；

确定模块，用于在进行所述操作后，确定所述网页中由于删除第一显示对象后所空余出的空白区域面积是否大于等于所述至少三个显示对象中位于所述第一显示对象之后的第二显示对象所占用的区域面积；其中，所述空白区域为所述至少三个显示对象中除所述第一显示对象外的至少两个显示对象中任意相邻的两个显示对象之间的区域和/或所述至少两个显示对象中的第一个显示对象与所述网页的起始位置之间的区域；

执行模块，用于在确定结果为是时，将所述第二显示对象移动到所述空白区域的位置。

19.根据权利要求18所述的装置，其特征在于，所述第二显示对象为位于所述第一显示对象之后的任意一个显示对象，或所述第二显示对象为位于所述第一显示对象之后的最后一个显示对象。

20.一种网页布局装置，其特征在于，包括：

检测模块，用于检测对网页进行的操作；其中，所述操作为移动所述网页中包含的至少三个显示对象中的第一显示对象的操作；

确定模块，用于在进行所述操作后，确定所述网页中由于移动第一显示对象后所空余出的空白区域面积是否大于等于所述至少三个显示对象中位于所述第一显示对象之后的第二显示对象所占用的区域面积；其中，所述空白区域为所述至少三个显示对象中位于所述第一显示对象之前的显示对象及移动后的第一显示对象中任意相邻的两个显示对象之间的区域和/或移动后的第一显示对象与所述网页的结束位置之间的区域；

执行模块，用于在确定结果为是时，将所述第二显示对象移动到所述空白区域的位置。