[发明专利]多栏网页的布局方法及装置有效
申请号: | 201611140483.0 | 申请日: | 2016-12-12 |
公开(公告)号: | CN106708985B | 公开(公告)日: | 2020-08-18 |
发明(设计)人: | 李静;梁超;柏盼;夏明星 | 申请(专利权)人: | 北京奇虎科技有限公司 |
主分类号: | G06F16/958 | 分类号: | G06F16/958;G06F16/957;G06F9/451 |
代理公司: | 深圳市世纪恒程知识产权代理事务所 44287 | 代理人: | 胡海国 |
地址: | 100088 北京市西城区新*** | 国省代码: | 北京;11 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 网页 布局 方法 装置 | ||
1.一种多栏网页的布局方法,包括:
设置用于存储所述多栏网页的网页内容的父容器;
在所述父容器内设置多个分别用于存储对应栏的栏目数据元素的子容器,将所述父容器的高度定义为各个子容器对应的最大高度;在所述父容器内设置填补元素,通过绝对定位将所述填补元素固定在所述父容器的底部;
设置所述填补元素的层级,使所述填补元素的层级低于所述栏目数据元素的层级;其中,各个子容器的顶部与所述父容器的顶部对齐。
2.根据权利要求1所述的方法,其中,所述在所述父容器内设置填补元素的步骤具体包括:在所述父容器内根据各个栏的栏目数据元素的元素类型设置多个分别与各个栏的栏目数据元素相对应的填补元素;
其中,各个栏的栏目数据元素的元素类型包括:图片类型和/或文本类型,且所述填补元素包括:图片类型的填补元素、和/或文本类型的填补元素。
3.根据权利要求2所述的方法,其中,所述通过绝对定位将所述填补元素固定在所述父容器的底部的步骤进一步包括:
确定各个栏的栏目数据元素在水平方向上对应的坐标范围,分别将各个填补元素固定在与对应栏的栏目数据元素对应的坐标范围内。
4.根据权利要求1-3任一所述的方法,其中,各个子容器的高度等于相应的子容器内存储的栏目数据元素的高度。
5.根据权利要求4所述的方法,其中,所述各个子容器的高度根据存储的栏目数据元素的高度变化进行自适应调整;
其中,当各个子容器的高度相同时,所述父容器内的填补元素处于不可见状态;当各个子容器的高度不同时,高度小于父容器高度的子容器中存储的栏目数据元素所对应的填补元素处于可见状态。
6.一种多栏网页的布局装置,包括:
父容器设置模块,适于设置用于存储所述多栏网页的网页内容的父容器;
子容器设置模块,适于在所述父容器内设置多个分别用于存储对应栏的栏目数据元素的子容器,且所述父容器设置模块进一步用于将所述父容器的高度定义为各个子容器对应的最大高度;其中,各个子容器的顶部与所述父容器的顶部对齐;
填补元素设置模块,适于在所述父容器内设置填补元素,通过绝对定位将所述填补元素固定在所述父容器的底部;层级设置模块,适于设置所述填补元素的层级,使所述填补元素的层级低于所述栏目数据元素的层级。
7.根据权利要求6所述的装置,其中,所述填补元素设置模块具体用于在所述父容器内根据各个栏的栏目数据元素的元素类型设置多个分别与各个栏的栏目数据元素相对应的填补元素;
其中,各个栏的栏目数据元素的元素类型包括:图片类型和/或文本类型,且所述填补元素包括:图片类型的填补元素、和/或文本类型的填补元素。
8.根据权利要求7所述的装置,其中,所述填补元素设置模块进一步包括:
设置单元,适于设置父容器内填补元素的元素类型;
固定单元,适于通过绝对定位将所述填补元素固定在所述父容器的底部,并进一步确定各个栏的栏目数据元素在水平方向上对应的坐标范围,分别将各个填补元素固定在与对应栏的栏目数据元素对应的坐标范围内。
9.根据权利要求6-8任一所述的装置,其中,各个子容器的高度等于相应的子容器内存储的栏目数据元素的高度。
10.根据权利要求9所述的装置,其中,所述各个子容器的高度根据存储的栏目数据元素的高度变化进行自适应调整;
其中,当各个子容器的高度相同时,所述父容器内的填补元素处于不可见状态;当各个子容器的高度不同时,高度小于父容器高度的子容器中存储的栏目数据元素所对应的填补元素处于可见状态。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于北京奇虎科技有限公司,未经北京奇虎科技有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201611140483.0/1.html,转载请声明来源钻瓜专利网。