一种网页布局方法及装置制造方法及图纸

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

【技术实现步骤摘要】
一种网页布局方法及装置
本专利技术涉及电子
，尤其涉及一种网页布局方法及装置。
技术介绍
随着互联网络技术的不断进步，网站作为互联网的主要内容供应者，也得到了长足的发展。为了满足用户的使用需求，在客户端浏览器中，可以通过使用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.根据权利要求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.一种网页布局方法，其特征在于，包括：浏览器客户端检测对网页进行的操作；其中，所述操作为移动所述网页中包含的至少三个显示对象中的第一显示对象的操作；在进行所述操作后，所述浏览器客户端确定所述网页中由于移动第一显示对象后所空余出的空白区域面积是否大于等于所述至少三个显示对象中位于所述第一显示对象之后的第二显示对象所占用的区域面积；其中，所述空白区域为所述至少三个显示对象中位于所述第一显示对象之前的显示对象及移动后的第一显示对象中任意相邻的两个显示对象之间的区域和/或移动后的第...

【专利技术属性】
技术研发人员：陈健，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：广东,44