CN104794116B - 一种页面中元素的布局方法和装置 - Google Patents

Abstract

本申请涉及一种页面中元素的布局方法，该方法包括：将页面中的容器划分为具有预定列宽度的多个列；根据元素宽度和每一列的当前列高度确定元素的位置；以及根据元素的位置对元素进行布局。根据本申请的技术方案，能够适用于各种不同种类的终端，并且能够适应于不同宽度的元素，从而避免现有技术中对元素的布局灵活性不高和无法适配多种类别的终端等问题。

Description

一种页面中元素的布局方法和装置

技术领域

本申请涉及互联网领域，更具体地涉及一种页面中元素的布局方法和装置。

背景技术

瀑布流，又称瀑布流式布局，是目前比较流行的一种网站页面中元素的布局方法，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，会不断加载数据块并附加至当前数据块的尾部。目前瀑布流的布局方式主要应用于轻博客与导购网站。

现有的瀑布流式布局方法通常通过以下步骤实现：a）从浏览器脚本获取容器宽度；b）设定列宽度；c）计算列数：列数=容器宽度/列宽度；d）保存每个列的当前高度作为起始高度；e）依次取容器中的所有数据块元素，寻找当前高度最小的一列进行排列；f）根据所排列的列的序号和当前高度，确定该数据块元素的横坐标和纵坐标（横坐标为所在列的序号乘以列宽，纵坐标为所在列的当前高度）；g）更新所在列的当前高度。至此，插入一个元素结束。以这种方式，可以插入全部元素，从而完成全部元素在页面中的布局。

但是，上述技术方案存在缺陷。一方面，该方案要求待排列元素的宽度相对固定，对元素的布局灵活性不高；另一方面，每一列的列宽度固定，无法适配多种类别的终端；第三，布局算法不支持元素宽度不相等的情况。

因此，在本领域中，需要一种页面中元素的布局方案，能够适用于各种不同种类的终端，并且能够适应于不同宽度的元素，避免现有技术中对元素的布局灵活性不高和无法适配多种类别的终端等问题。

发明内容

本申请的主要目的在于，提供一种页面中元素的布局技术，以解决现有技术中元素的布局灵活性不高和无法适配多种类别的终端等问题。

根据本申请的第一方面，提供了一种页面中元素的布局方法，其特征在于，包括：将页面中的容器划分为具有预定列宽度的多个列；根据元素宽度和每一列的当前列高度确定元素的位置；以及根据元素的位置对元素进行布局。

根据本申请的第二方面，提供了一种页面中元素的布局装置，其特征在于，包括：划分模块，用于将页面中的容器划分为具有预定列宽度的多个列；确定模块，用于根据元素宽度和每一列的当前列高度确定元素的位置；以及布局模块，用于根据元素的位置对元素进行布局。

与现有技术相比，根据本申请的技术方案，能够适用于各种不同种类的终端，并且能够适应于不同宽度的元素，从而避免现有技术中对元素的布局灵活性不高和无法适配多种类别的终端等问题。

附图说明

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

图1是根据本申请一个实施例的页面中元素的布局方法的流程图；

图2是根据本申请一个实施例的页面中元素的布局方法的更详细的流程图；

图3是根据本申请一个实施例的根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置的步骤的更详细的流程图；

图4是根据本申请一个实施例的页面中元素的布局方法的示意图；以及

图5是根据本申请一个实施例的页面中元素的布局装置的结构框图。

具体实施方式

本申请的主要思想在于，通过将页面中的容器划分为具有预定列宽度的多个列，可以根据元素宽度和每一列的当前列高度确定元素的位置，从而根据元素的位置对元素进行布局。该技术方案能够适用于各种不同种类的终端（例如，PC端、Ipad等平板设备端或手机端），并且能够适应于不同宽度的元素，从而避免现有技术中对元素的布局灵活性不高和无法适配多种类别的终端等问题。

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

参考图1，图1是根据本申请一个实施例的页面中元素的布局方法100的流程图。如图1所示，方法100开始于步骤101。

在步骤101，将页面中的容器划分为具有预定列宽度的多个列。

具体而言，不同的终端具有不同的浏览器。可以从浏览器脚本中获得页面的宽度和指定容器的宽度，然后可以根据预先设定的列宽度，将容器的宽度划分为多个列。例如，页面的宽度为1280像素，页面中指定容器的宽度为1024像素。可以将列宽度预设为128像素，这样，可以将容器等分为8列。

在步骤102，根据元素宽度和每一列的当前列高度确定元素的位置。

具体而言，在步骤101中将容器划分为多个列后，可以预先设定每一列的初始列高度，并且，根据待布局元素的宽度和每一列的宽度，可以得到每个元素需占用的列数。根据元素需占用的列数和每一列的当前列高度确定元素的位置。

根据本申请的一个实施例，可以根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置。

优选地，上述特定规则为向上向左原则或向上向右原则。其中，向上向左原则是：在对元素进行试排的过程中，从最左边的第一列开始向右试排，并且，以容器最上侧作为X轴，以容器最左侧作为Y轴，在所有可布局的位置中，尽量向上并向左进行布局。类似地，向上向右原则是：在对元素进行试排的过程中，从最右边的第一列开始向左试排，并且，以容器最上侧作为X轴，以容器最左侧作为Y轴，在所有可布局的位置中，尽量向上并向右进行布局。

在对元素以特定规则针对每一列进行试排的过程中，元素需占用的列数是固定不变的。将元素在每一列进行试排时，所覆盖的宽度为该元素需占用的列数。例如，元素a的宽度为256像素（px），高度为128像素，列宽度为128像素，则元素a所占的列数为256/128=2列。这样，在对元素a以向左向上原则针对每一列进行试排后，可以基于元素a需占用的列数和每一列的当前列高度得到元素a左上角的坐标，从而可以确定其在容器中布局的位置。

需要说明的是，在计算元素需要占的列数时，遵循向上取整原则。例如，元素a的宽度为312像素，列宽度为128像素，则元素a所占的列数=312/128=2.4，根据向上取整原则，元素a需占用的列数为3列。

在步骤103，根据元素的位置对元素进行布局。

具体而言，在经过步骤102确定元素在容器中的左上角或右上角坐标后，可以根据该坐标对该元素在容器中定位，从而完成布局。

在实际操作中，可以通过上述方法100得到每一个待布局元素在容器中的位置。通过对每一个元素进行布局，可以完成对所有元素在容器中的布局。另外，在根据元素的位置对元素进行布局的步骤之后，需要根据所布局元素的位置和元素高度更新每一列的当前列高度。

至此，描述了根据本申请一个实施例的页面中元素的布局方法100的流程图。本实施例的方法100通过将页面中的容器划分为具有预定列宽度的多个列，可以根据元素宽度和每一列的当前列高度确定元素的位置，从而可以根据元素的位置对元素进行布局。与现有技术相比，该方法100可以适用于各种不同种类的终端，并且能够适应于不同宽度的元素，从而避免现有技术中对元素的布局灵活性不高和无法适配多种类别的终端等问题。

参考图2，图2是根据本申请一个实施例的页面中元素的布局方法100的更详细的流程图。如图2所示，方法200开始于步骤201。

在步骤201，获取容器宽度。

在步骤202，根据预定的列宽度将容器划分为多个列。

例如，页面的宽度为1280像素，页面中指定容器的宽度为1024像素。可以将列宽度预先设定为128像素，这样，可以将容器等分为8列。

然后，进入步骤203，对每一列赋予列编号。例如，可以对首列赋予编号0，对下一列赋予编号1，以此类推，对第N列赋予编号N-1。例如，如果容器内划分为8列，可以对这8列依次赋予编号0、1、……、7。

在步骤204，对每一列赋予初始列高度。优选地，可以将每一列的初始列高度设为零。

在步骤205，根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置。

优选地，上述特定规则为向上向左原则或向上向右原则。其中，向上向左原则是：在对元素进行试排的过程中，从最左边的第一列开始向右试排，并且，以容器最上侧作为X轴，以容器最左侧作为Y轴，在所有可布局的位置中，尽量向上并向左进行布局。类似地，向上向右原则是：在对元素进行试排的过程中，从最右边的第一列开始向左试排，并且，以容器最上侧作为X轴，以容器最左侧作为Y轴，在所有可布局的位置中，尽量向上并向右进行布局。

在对元素以特定规则针对每一列进行试排的过程中，元素需占用的列数是固定不变的。将元素在每一列进行试排时，所覆盖的宽度为该元素需占用的列数。例如，元素a的宽度为256像素，高度为128像素，列宽度为128像素，则元素a所占的列数为256/128=2列。这样，在对元素a以向左向上原则针对每一列进行试排后，可以基于元素a所占的列数和每一列的当前列高度得到元素a左上角的坐标，从而可以确定其在容器中布局的位置。

需要说明的是，在计算元素需要占的列数时，遵循向上取整原则。例如，元素a的宽度为312像素，列宽度为128像素，则元素a所占的列数=312/128=2.4，根据向上取整原则，元素a所占的列数为3列。

在步骤206，根据元素的位置对元素进行布局。对步骤206的操作与图1中步骤103类似，在此不再赘述。

至此，描述了根据本申请一个实施例的页面中元素的布局方法的更详细的流程图。相对于图1中的方法100，本实施例的方法200对图1中的相关步骤进行了更详细的描述。该方法200同样可以适用于各种不同种类的终端，并且能够适应于不同宽度的元素，从而避免现有技术中对元素的布局灵活性不高和无法适配多种类别的终端等问题。

下面，对图2中根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置的步骤进行详细描述。图3是根据本申请一个实施例的根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置的步骤的更详细的流程图。如图3所示，方法300开始于步骤301。

在步骤301，根据元素宽度在首列进行试排。

在步骤302，判断所试排的列的列编号与元素需占用列的数量之和是否小于或等于容器中的总列数。

当所试排的列的列编号与元素需占用列的数量之和小于或等于容器中的总列数时，进入步骤303，记录元素宽度所覆盖到的列的当前列高度中的最大值和首列的列编号。

当所试排的列的列编号与元素需占用列的数量之和大于容器中的总列数时，结束试排。

在步骤303中记录元素宽度所覆盖到的列的当前列高度中的最大值和第一列的列编号后，进入步骤304，将该元素针对下一列继续进行试排。

之后，在步骤305，判断所试排的列的列编号与元素需占用列的数量之和是否小于或等于容器中的总列数。

当所试排的列的列编号与元素需占用列的数量之和大于容器中的总列数时，进入步骤309，根据记录的当前列高度中的最大值和列编号，确定元素的位置。

当所试排的列的列编号与元素需占用列的数量之和不大于（小于或等于）容器中的总列数时，进入步骤306，判断元素宽度所覆盖到的列的当前列高度中的最大值是否小于之前所记录的元素宽度所覆盖到的列的当前列高度中的最大值。

当元素宽度所覆盖到的列的当前列高度中的最大值小于之前所记录的元素宽度所覆盖到的列的当前列高度中的最大值时，进入步骤307，将记录更新为本次试排时元素宽度所覆盖到的列的当前列高度中的最大值和本次所试排的列的列编号。

当元素宽度所覆盖到的列的当前列高度中的最大值不小于（大于或等于）之前所记录的元素宽度所覆盖到的列的当前列高度中的最大值时，不进行进一步操作，即不更新之前记录的当前列高度中的最大值和列编号。

之后，进入步骤308，判断所试排的列的列编号与元素需占用列的数量之和是否等于容器中的总列数。

当所试排的列的列编号与元素需占用列的数量之和等于容器中的总列数时，进入步骤309，根据记录的当前列高度中的最大值和列编号，确定元素的位置。具体来说，可以通过所记录的当前列高度最大值得到元素的纵坐标，通过所记录的列编号和列宽度得到元素的横坐标，并且将该坐标作为元素左上角或右上角在容器中的坐标，从而确定该元素在容器中的位置。

当所试排的列的列编号与元素需占用列的数量之和不等于（小于）容器中的总列数时，进入步骤304，将该元素针对下一列进行试排，直到当所试排的列的列编号与元素需占用列的数量之和等于容器中的总列数时，进入步骤309。

至此，描述了根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置的步骤的更详细的流程图。

下面，结合图4，举一实例对图3中各步骤的具体应用进行说明。

例如，已知在宽度为1280像素的页面A中具有宽度为1024像素的容器B，预设列宽度为128像素，根据该列宽度将容器划分为8列，从左至右对每一列赋予列编号，依次为0、1、2、……、7，将每一列的初始列高度设为0像素。存在待布局元素a～元素n，为了示例的目的，在此进给出部分待布局元素的高度及宽度：

元素a，宽度为256像素，高度为128像素；

元素b，宽度为128像素，高度为256像素；

元素c，宽度为128像素，高度为128像素；

元素d，宽度为256像素，高度为384像素；

元素e，宽度为256像素，高度为128像素；

元素f，宽度为128像素，高度为256像素；

元素g，宽度为128像素，高度为128像素。

本实例以向上向左原则为例进行说明。

首先，对元素a在容器中进行试排，以确定该元素在容器中的位置，具体步骤如下：

1）根据元素a的宽度（256像素）在容器最左侧的首列进行试排；

2）判断所试排的列的列编号与元素需占用列的数量之和是否小于或等于容器中的总列数。本例中，首列的列编号为0，元素a需占用的列数为256/128=2列，0+2=2，小于总列数8；

3）记录元素宽度所覆盖到的列的当前列高度中的最大值和首列的列编号。本例中，元素a所覆盖到的列为第0列和第1列，由于第0列和第1列的当前列高度均为0（初始列高度），因此记录（0，0），其中第一个0为首列的列编号，第二个0为元素a所覆盖到的第0列和第1列中当前列高度中的最大值（0像素）；

4）将元素a继续在其余列进行试排，在第2列到第6列的试排过程中，由于在每一列试排时，元素a所覆盖到的列当前高度中的最大值均为0，等于之前在步骤3）中记录的列高度最大值，因此，不更新之前的记录；其中，当在第6列试排时，所试排的列的列编号与元素需占用列的数量之和（2+6=8）等于容器中的总列数8，试排结束，不再继续试排。

5）根据记录的当前列高度中的最大值和列编号，确定元素的位置。本例中，经试排后所记录的当前列高度中的最大值和列编号为（0,0）。可以通过记录中的当前列高度最大值得到元素的纵坐标（0），并且通过记录中的列编号和列宽度得到元素的横坐标（0*128=0）。通过将该坐标作为元素a左上角的坐标，即，{x:0px,y:0px}，可以确定该元素在容器中的位置，进而可以对其进行布局。

至此，完成了对元素a的布局。

需要说明的是，当完成对元素a的布局后，该元素所覆盖到的列的当前高度根据该元素的高度进行更新，即，第0列和第1列的当前高度从0像素更新为128像素，其余列的当前列高度不变。

接下来，对元素b进行试排，以确定该元素在容器中的位置，具体步骤如下：

1）根据元素b的宽度（128像素）在容器最左侧的首列进行试排；

2）判断所试排的列的列编号与元素需占用列的数量之和是否小于或等于容器中的总列数。本例中，首列的列编号为0，元素b需占用的列数为128/128=1列，0+1=1，小于纵列数8；

3）记录元素宽度所覆盖到的列的当前列高度中的最大值和首列的列编号。本例中，元素b所覆盖到的列为第0列和第1列，由于第0列和第1列的当前列高度为128，因此记录（0，128），其中第一个0为首列的列编号，128为元素b所覆盖到的第0列和第1列中当前列高度中的最大值（128像素）；

4）将元素b继续在其余列进行试排，在第2列试排时，元素b所覆盖到的列当前高度中的最大值为0像素，小于之前在步骤3）中记录的列高度最大值，因此，将记录更新为本次试排时元素宽度所覆盖到的列的当前列高度中的最大值和本次所试排的列的列编号，即，（2，0）。在第3列到第7列的试排过程中，由于每次试排所得到的当前列高度最大值均为0像素，因此不更新之前的记录；

5）根据记录的当前列高度中的最大值和列编号，确定元素的位置。本例中，记录的当前列高度中的最大值和列编号为（2，0）。可以通过记录中的当前列高度最大值得到元素的纵坐标（0），并且通过记录中的列编号和列宽度得到元素的横坐标（2*128=256）。通过将该坐标作为元素b左上角的坐标，即，{x:256px,y:0px}，可以确定该元素在容器中的位置，进而可以对其进行布局。

至此，完成了对元素b的布局。

与对元素a的布局类似，当完成对元素b的布局后，该元素所覆盖到的列的当前高度根据该元素的高度更新，即，第2列和第3列的当前高度更新为256像素。

根据以上方法，可以对其余各元素进行试排并得到各元素的左上角坐标：元素c坐标{x:384px,y:0px}、元素d坐标{x:512px,y:0px}、元素e坐标{x:768px,y:0px}、元素坐标{x:0px,y:128px}、元素g坐标{x:128px,y:128px}。

同理，可以对所有待布局元素进行布局。完成布局后的结果如图4所示。

至此，通过图1至图4描述了根据本申请实施例的页面中元素的布局方法。上述方法不仅适用于瀑布流式的页面布局，而且也适用于除瀑布流式的页面布局以外的其他例如翻页式的页面布局。

本申请实施例还提供了相应的装置。

图5是根据本申请一个实施例的页面中元素的布局装置的结构框图。

如图5所示，装置500可以包括：划分模块510，用于将页面中的容器划分为具有预定列宽度的多个列；确定模块520，用于根据元素宽度和每一列的当前列高度确定元素的位置；以及布局模块530，用于根据元素的位置对元素进行布局。

根据本申请的一个实施例，划分模块510可以进一步包括：获取子模块，用于获取容器宽度；以及划分子模块，用于根据预定的列宽度将容器划分为多个列。

根据本申请的一个实施例，装置500可以进一步包括：编号模块，用于对每一列赋予列编号；以及设置模块，用于将每一列的初始列高度设为零。

根据本申请的一个实施例，确定模块520可以进一步包括：试排子模块，用于根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置。优选地，特定规则为向上向左原则或向上向右原则。

根据本申请的一个实施例，试排子模块可以进一步包括：首列试排子模块，用于根据元素宽度在首列进行试排，其中，当所试排的列的列编号与元素需占用列的数量之和小于或等于容器中的总列数时，记录元素宽度所覆盖到的列的当前列高度中的最大值和首列的列编号；其余列试排子模块，用于根据元素宽度在其余列进行试排，其中，当元素宽度所覆盖到的列的当前列高度中的最大值小于之前所记录的元素宽度所覆盖到的列的当前列高度中的最大值时，将记录更新为本次试排时元素宽度所覆盖到的列的当前列高度中的最大值和本次所试排的列的列编号；以及确定子模块，用于根据记录的当前列高度中的最大值和列编号，确定元素的位置。

根据本申请的一个实施例，试排子模块可以进一步包括：切换子模块，当元素宽度所覆盖到的列的当前列高度中的最大值大于或等于之前所记录的元素宽度所覆盖到的列的当前列高度中的最大值时，并且当所试排的列的列编号与元素需占用列的数量之和小于容器中的总列数时，针对下一列进行试排。

根据本申请的一个实施例，试排子模块可以进一步包括：停止试排模块，用于当所试排的列的列编号与元素需占用列的数量之和大于容器中的总列数时，停止试排。

根据本申请的一个实施例，装置500可以进一步包括：更新模块，用于根据所布局元素的位置和元素高度更新每一列的当前列高度。

由于本实施例的装置所实现的功能基本相应于前述图1至图4所示的方法实施例，故本实施例的描述中未详尽之处，可以参见前述实施例中的相关说明，在此不做赘述。

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

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

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

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

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

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

Claims (8)

1.一种页面中元素的布局方法，其特征在于，包括：

将页面中的容器划分为具有预定列宽度的多个列；

根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置，所述特定规则为向上向左原则或向上向右原则；以及

根据元素的位置对元素进行布局。

2.根据权利要求1所述的方法，其特征在于，将页面中的容器划分为具有预定列宽度的多个列的步骤进一步包括：

获取容器宽度；以及

根据预定的列宽度将容器划分为多个列。

3.根据权利要求1所述的方法，其特征在于，在将页面中的容器划分为具有预定列宽度的多个列的步骤之后、在根据元素宽度和每一列的当前列高度确定元素的位置的步骤之前，进一步包括：

对每一列赋予列编号；以及

对每一列赋予初始列高度。

4.根据权利要求1所述的方法，其特征在于，根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置的步骤，进一步包括：

根据元素宽度在首列进行试排，其中，当所试排的列的列编号与元素需占用列的数量之和小于或等于容器中的总列数时，记录元素宽度所覆盖到的列的当前列高度中的最大值和首列的列编号；

根据元素宽度在其余列进行试排，其中，当元素宽度所覆盖到的列的当前列高度中的最大值小于之前所记录的元素宽度所覆盖到的列的当前列高度中的最大值时，将记录更新为本次试排时元素宽度所覆盖到的列的当前列高度中的最大值和本次所试排的列的列编号；以及

根据记录的当前列高度中的最大值和列编号，确定元素的位置。

5.根据权利要求4所述的方法，其特征在于，根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置的步骤，进一步包括：

当元素宽度所覆盖到的列的当前列高度中的最大值大于或等于之前所记录的元素宽度所覆盖到的列的当前列高度中的最大值时，并且当所试排的列的列编号与元素需占用列的数量之和小于容器中的总列数时，针对下一列进行试排。

6.根据权利要求4或5所述的方法，其特征在于，根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置的步骤，进一步包括：

当所试排的列的列编号与元素需占用列的数量之和大于容器中的总列数时，停止试排。

7.根据权利要求1所述的方法，其特征在于，在根据元素的位置对元素进行布局的步骤之后，进一步包括：

根据所布局元素的位置和元素高度更新每一列的当前列高度。

8.一种页面中元素的布局装置，其特征在于，包括：

划分模块，用于将页面中的容器划分为具有预定列宽度的多个列；

确定模块，用于根据元素宽度和每一列的当前列高度，对元素以特定规则针对每一列进行试排，以确定元素的位置，所述特定规则为向上向左原则或向上向右原则；以及

布局模块，用于根据元素的位置对元素进行布局。