[发明专利]多栏网页的布局方法及装置

说明书

本发明公开了一种多栏网页的布局方法及装置，至少能够解决现有技术中在对多栏网页页面的栏目进行增加或删减操作时，无法因为网页中栏目内容的改变而适应性调整网页页面布局，进而影响网页页面布局的美观性的技术问题。该多栏网页的布局方法包括：设置用于存储多栏网页的网页内容的父容器；在父容器内设置多个分别用于存储对应栏的栏目数据元素的子容器，将父容器的高度定义为各个子容器对应的最大高度；在父容器内设置填补元素，通过绝对定位将所述填补元素固定在父容器的底部；设置填补元素的层级，使填补元素的层级低于栏目数据元素的层级。

技术领域

本发明涉及网络通信技术领域，具体涉及一种多栏网页的布局方法及装置。

背景技术

随着互联网的应用和普及，互联网已经成为人们日常生活中一个重要工具，人们甚至每天都需要浏览互联网中的网页，以获取自己所需要的信息。由于一个网页中往往会包含大量不同类型的信息，因此，多栏网页得到了越多越多的应用。在多栏网页中，整个网页的页面内容被划分为多个栏，每个栏中所显示的内容可以根据实际需要而动态调整。

在实现本申请实施例的过程中，发明人发现现有技术中至少存在如下问题：由于各个栏中所显示的内容可以根据实际需求而动态调整，因此，当某一栏由于调整而导致内容增多时，将会导致该栏的长度变长；而某一栏由于调整而导致内容减少时，将会导致该栏的长度变短。相应地，由于各个栏的高度不同，导致各个栏的底部参差不齐，且有些栏的底部会出现大量的空白区域。由此可见，现有的多栏网页的布局方式不仅无法有效利用网页的页面空间，还导致网页的页面布局不够美观，影响网页页面的视觉效果。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的多栏网页的布局方法及装置。

依据本发明的一个方面，提供了一种多栏网页的布局方法，包括：设置用于存储所述多栏网页的网页内容的父容器；在所述父容器内设置多个分别用于存储对应栏的栏目数据元素的子容器，将所述父容器的高度定义为各个子容器对应的最大高度；在所述父容器内设置填补元素，通过绝对定位将所述填补元素固定在所述父容器的底部；设置所述填补元素的层级，使所述填补元素的层级低于所述栏目数据元素的层级。

可选地，所述在所述父容器内设置填补元素的步骤具体包括：在所述父容器内根据各个栏的栏目数据元素的元素类型设置多个分别与各个栏的栏目数据元素相对应的填补元素；其中，各个栏的栏目数据元素的元素类型包括：图片类型和/或文本类型，且所述填补元素包括：图片类型的填补元素、和/或文本类型的填补元素。

可选地，所述通过绝对定位将所述填补元素固定在所述父容器的底部的步骤进一步包括：确定各个栏的栏目数据元素在水平方向上对应的坐标范围，分别将各个填补元素固定在与对应栏的栏目数据元素对应的坐标范围内。

可选地，根据上述任一所述方法，其中，各个子容器的高度等于相应的子容器内存储的栏目数据元素的高度，且各个子容器的顶部与所述父容器的顶部对齐。

可选地，所述各个子容器的高度根据存储的栏目数据元素的高度变化进行自适应调整；其中，当各个子容器的高度相同时，所述父容器内的填补元素处于不可见状态；当各个子容器的高度不同时，高度小于父容器高度的子容器中存储的栏目数据元素所对应的填补元素处于可见状态。

依据本发明的另一方面，提供了一种多栏网页的布局装置，包括：父容器设置模块，适于设置用于存储所述多栏网页的网页内容的父容器；子容器设置模块，适于在所述父容器内设置多个分别用于存储对应栏的栏目数据元素的子容器，且所述父容器设置模块进一步用于将所述父容器的高度定义为各个子容器对应的最大高度；填补元素设置模块，适于在所述父容器内设置填补元素，通过绝对定位将所述填补元素固定在所述父容器的底部；层级设置模块，适于设置所述填补元素的层级，使所述填补元素的层级低于所述栏目数据元素的层级。