[发明专利]一种HTML列表自适应布局方法及装置

说明书

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

技术领域

本发明涉及软件开发领域，更具体地，涉及一种HTML列表自适应布局方法及装置。

背景技术

HTML(HyperText Markup Language，超文本标记语言)中的超文本是指页面内可以包含图片、链接、音乐和程序等非文字元素。它通过标记符号来标记要显示的网页中的各个部分。HTML列表包含多个列表项。HTML列表自适应布局是指当屏幕大小改变时，HTML列表自动根据屏幕大小呈现不同布局。

目前，通用的列表自适应布局有两种方式，一种方式为列表项的宽度为固定像素，采用浮动(float:left或float:right)布局，当HTML页面宽度不够时，最后一个列表项自动换行到下一行；另一种方式为列表项的宽度使用百分比标示，列表项随着HTML页面宽度的变化动态放大或者缩小。

上述第一种方法中，列表项的列数会随着HTML页面的宽度变化增加或减少，且由于列表项宽度固定，当HTML页面宽度变动时HTML页面左右两侧会出现空白。第二种方法中，由于列表项的宽度使用百分比，当HTML页面的宽度较小时，列表项的宽度也会随之变得较小，不利于用户浏览；当用户HTML页面宽度较大时，列表项的宽度会随之变得很大，不利于更多数据的展示和浏览，且影响HTML页面美观。

发明内容

为克服上述现有的HTML中列表自适应布局技术存在不美观和不易浏览的问题或者至少部分地解决上述问题，本发明提供了一种HTML列表自适应布局方法及装置。

根据本发明的第一方面，提供一种HTML列表自适应布局方法，包括：

S1，根据HTML页面中一行最多能展示列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；

S2，根据所述补白因子与所述列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；

S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述列表进行布局。

具体地，所述步骤S1之前还包括：

将所述HTML页面的当前宽度除以所述列表项的预设宽度，获取所述HTML页面最多能展示列表的列表项的第一列数。

具体地，所述步骤S2具体包括：

当所述比较结果为所述补白因子大于所述列表两侧HTML页面的空白宽度时，将所述第一列数加1，获取第二列数。

具体地，所述步骤S2具体包括：

当所述比较结果为所述补白因子小于或等于所述列表两侧HTML页面的空白宽度时，将所述第一列数作为所述第二列数。

具体地，所述补白因子通过下式获取：

factor＝(1-1/column)*defWidth；

其中，factor为所述补白因子，column为所述列表项的第一列数，defWidth为所述列表项的预设宽度。

具体地，所述步骤S2之前还包括：