一种HTML列表自适应布局方法及装置制造方法及图纸

本发明专利技术提供一种HTML中列表自适应布局方法及装置，所述方法包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。本发明专利技术使列表更合理地铺满HTML整个页面，展示更多内容，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。

【技术实现步骤摘要】
一种HTML中列表自适应布局方法及装置
本专利技术涉及软件开发领域，更具体地，涉及一种HTML中列表自适应布局方法及装置。
技术介绍
HTML(HyperTextMarkupLanguage，超文本标记语言)中的超文本是指页面内可以包含图片、链接、音乐和程序等非文字元素。它通过标记符号来标记要显示的网页中的各个部分。HTML列表包含多个列表项。HTML中列表自适应布局是指当屏幕大小改变时，HTML列表自动根据屏幕大小呈现不同布局。目前，通用的列表自适应布局有两种方式，一种方式为列表项的宽度为固定像素，采用浮动(float:left或float:right)布局，当HTML页面宽度不够时，最后一个列表项自动换行到下一行；另一种方式为列表项的宽度使用百分比标示，列表项随着HTML页面宽度的变化动态放大或者缩小。上述第一种方法中，列表项的列数会随着HTML页面的宽度变化增加或减少，且由于列表项宽度固定，当HTML页面宽度变动时HTML页面左右两侧会出现空白。第二种方法中，由于列表项的宽度使用百分比，当HTML页面的宽度较小时，列表项的宽度也会随之变得较小，不利于用户浏览；当用户HTML页面本文档来自技高网...

【技术保护点】
一种HTML中列表自适应布局方法，其特征在于，包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。

【技术特征摘要】
1.一种HTML中列表自适应布局方法，其特征在于，包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。2.根据权利要求1所述的HTML中列表自适应布局方法，其特征在于，所述步骤S1之前还包括：将所述HTML页面的当前宽度除以所述列表项的预设宽度，获取所述HTML页面一行最多能展示HTML列表的列表项的第一列数。3.根据权利要求1所述的HTML中列表自适应布局方法，其特征在于，所述步骤S2具体包括：对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子大于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数加1，获取第二列数。4.根据权利要求1所述的HTML中列表自适应布局方法，其特征在于，所述步骤S2具体包括：对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子小于或等于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数作为所述第二列数。5.根据权利要求1-4任一所述的HTML中列表自适应布局方法，其特征在于，所述补白因子通过下式获取：factor＝(1-1/column)*defWidth；其中，factor为所述补白因子，column为所述列表项的第一列数，defWi...

【专利技术属性】
技术研发人员：易春宝，张文明，陈少杰，
申请(专利权)人：武汉斗鱼网络科技有限公司，
类型：发明
国别省市：湖北,42