CN107562455A - 一种html中列表自适应布局方法及装置 - Google Patents
一种html中列表自适应布局方法及装置 Download PDFInfo
- Publication number
- CN107562455A CN107562455A CN201710697576.1A CN201710697576A CN107562455A CN 107562455 A CN107562455 A CN 107562455A CN 201710697576 A CN201710697576 A CN 201710697576A CN 107562455 A CN107562455 A CN 107562455A
- Authority
- CN
- China
- Prior art keywords
- html
- width
- list
- columns
- list items
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 34
- 239000000945 filler Substances 0.000 claims abstract description 57
- 230000000052 comparative effect Effects 0.000 claims abstract description 21
- 230000001052 transient effect Effects 0.000 claims description 5
- 238000004891 communication Methods 0.000 claims description 3
- 230000005055 memory storage Effects 0.000 claims description 2
- 230000008859 change Effects 0.000 abstract description 13
- 238000012544 monitoring process Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 239000004744 fabric Substances 0.000 description 1
- 238000007667 floating Methods 0.000 description 1
- 238000003780 insertion Methods 0.000 description 1
- 230000037431 insertion Effects 0.000 description 1
- 239000003550 marker Substances 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
- Document Processing Apparatus (AREA)
Abstract
本发明提供一种HTML中列表自适应布局方法及装置，所述方法包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。本发明使列表更合理地铺满HTML整个页面，展示更多内容，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。
Description
技术领域
本发明涉及软件开发领域，更具体地，涉及一种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页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；
S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；
S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
具体地，所述步骤S1之前还包括：
将所述HTML页面的当前宽度除以所述列表项的预设宽度，获取所述HTML页面一行最多能展示HTML列表的列表项的第一列数。
具体地，所述步骤S2具体包括：
对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子大于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数加1，获取第二列数。
具体地，所述步骤S2具体包括：
对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子小于或等于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数作为所述第二列数。
具体地，所述补白因子通过下式获取：
factor＝(1-1/column))*defWidth；
其中，factor为所述补白因子，column为所述列表项的第一列数，defWidth为所述列表项的预设宽度。
具体地，所述步骤S2之前还包括：
对所述HTML页面的当前宽度和所述列表项的预设宽度进行模运算，获取所述HTML列表两侧HTML页面的空白宽度。
具体地，所述步骤S3中根据所述实际宽度对所述HTML列表进行布局的步骤具体包括：
构建style标签样式字符串，将所述style标签样式字符串插入预设DIV中；
根据所述列表项的实际宽度，更新所述style标签样式字符串中列表项的实际宽度。
根据本发明的第二方面，提供一种HTML中列表自适应布局装置，包括：
第一获取单元，用于根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；
第二获取单元，用于根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；
第三获取单元，用于将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
根据本发明的第三方面，提供一种HTML中列表自适应布局设备，包括：
至少一个处理器、至少一个存储器和总线；其中，
所述处理器和存储器通过所述总线完成相互间的通信；
所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如前所述的方法。
根据本发明的第四方面，提供一种非暂态计算机可读存储介质，用于存储如前所述方法的计算机程序。
本发明提供一种HTML中列表自适应布局方法及装置，该方法根据补白因子与列表两侧HTML页面的空白宽度的比较结果确定列表项的列数，使用所述HTML页面的当前宽度除以确定的列表项列数获取列表项的实际宽度，根据实际宽度对列表进行布局，使列表更合理地铺满HTML整个页面，展示更多内容，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。
附图说明
图1为本发明实施例提供的HTML中列表自适应布局方法流程示意图；
图2为本发明实施例提供的HTML中列表自适应布局装置结构示意图；
图3为本发明实施例提供的HTML中列表自适应布局设备结构示意图。
具体实施方式
下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
在本发明的一个实施例中提供一种HTML中列表自适应布局方法，图1为本发明实施例提供的HTML中列表自适应布局方法流程示意图，该方法包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
具体地，S1之前，还包括添加事件监听，监听用户更改浏览器大小的操作，若监听到用户更改浏览器大小的操作，则执行S1。由于不同用户的显示设备的尺寸不同，像素大小不同，浏览器的宽度也不同，用户需要缩放浏览器的大小调整显示效果。
S1中，所述列表可以为有序列表ol、无序列表ul或定义列表dl。一个列表中包含多个列表项，所述列表项内部可以使用段落、换行符、图片、链表以及其他列表等。所述列表项以浮动方式布局，即所述列表项的样式为float:left或float:right。所述列表项的预设宽度，如defWidth，为预先设置的列表项的宽度，一般根据大多数浏览器的尺寸进行设置。所述补白因子用于确定是否增加列数。所述补白因子根据HTML页面中一行最多能展示的列表项的第一列数和所述列表项的预设宽度获取。所述第一列数为整数。
S2中，所述空白为所述列表两侧没有被所述列表填充的HTML页面。将所述补白因子与所述列表两侧HTML页面的空白宽度进行比较，根据比较结果获取所述列表项的第二列数。
S3中，调用JavaScript获取用户浏览器的HTML页面的当前宽度，如boxWidth。将所述HTML页面的当前宽度除以所述列表项的第二列数，获取所述列表项的实际宽度，所述列表项的实际宽度通过JavaScript计算获取。根据所述实际宽度更新所述列表项的样式，实现对所述列表的重新布局。
例如，定义一个无序列表：
<ul>
<li class＝"item"></li>
<li class＝"item"></li>
</ul>
其中，所述列表中有两个列表项，<ul>标签标示列表，<li>标签表示列表项。
本实施例根据补白因子与列表两侧HTML页面的空白宽度的比较结果确定列表项的列数，使用所述HTML页面的当前宽度除以确定的列表项列数获取列表项的实际宽度，根据实际宽度对列表进行布局，一方面，使列表更合理地铺满HTML整个页面，展示更多内容，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。
在上述实施例的基础上，本实施例中所述步骤S1之前还包括：将所述HTML页面的当前宽度除以所述列表项的预设宽度，获取所述HTML页面中一行最多能展示HTML列表的列表项的第一列数。
具体地，所述第一列数为整数，即所述第一列数column＝parseInt(boxWidth/defWidth)。
在上述实施例的基础上，本实施例中所述步骤S2具体包括：对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子大于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数加1，获取第二列数。
例如，当所述比较结果为factor>blankWidth时，column’＝column+1。其中，column’为所述第二列数，factor为所述补白因子，blankWidth为所述空白宽度。所述列表项的实际宽度realWidth通过用所述HTML页面的当前宽度boxWidth除以第二列数获取，即realWidth＝boxWidth/column’＝boxWidth/(column+1)。
本实施例通过在补白因子大于列表两侧HTML页面的空白宽度时，将HTML页面的当前宽度除以所述第二列数获取列表的实际宽度，所述第二列数为第一列数加1，根据实际宽度将列表进行布局，一方面，使列表铺满HTML整个页面，且重新计算的实际宽度与预设宽度相比稍微减少，变动不大，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。
在上述实施例的基础上，本实施例中所述步骤S2具体包括：对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子小于或等于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数作为所述第二列数。
具体地，当所述补白因子小于或等于所述列表两侧HTML页面的空白宽度时，则将所述第一列数作为第二列数，即直接将所述HTML页面的当前宽度除以所述第一列数，获取所述列表项的实际宽度，根据所述列表项的实际宽度更新所述列表项的样式，从而实现对所述列表的重新布局。
例如，当所述补白因子小于或等于所述列表两侧HTML页面的空白宽度时，由于第一列数等于第二列数，即column’＝column，则所述列表项的实际宽度realWidth通过用所述HTML页面的当前宽度boxWidth除以第二列数获取，所述第二列数为HTML页面中一行最多能展示的列表项的第一列数column，即realWidth＝boxWidth/column’＝boxWidth/column。
本实施例通过在补白因子小于或等于列表两侧HTML页面的空白宽度时，将HTML页面的当前宽度除以所述第一列数，获取列表的实际宽度，根据实际宽度将列表进行布局，一方面，使列表铺满HTML整个页面，且重新计算的实际宽度与预设宽度相比稍微增加，变动不大，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。
在上述实施例的基础上，本实施例中所述补白因子通过下式获取：
factor＝(1-1/column)*defWidth；
其中，factor为所述补白因子，column为所述列表项的第一列数，defWidth为所述列表项的预设宽度。
本实施例中所述补白因子用于与空白宽度进行比较，根据比较结果确定是否增加列数，通过确定的填充形式获取的实际宽度与预设宽度相差很小，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。
在上述实施例的基础上，本实施例中所述步骤S2之前还包括：对所述HTML页面的当前宽度和所述列表项的预设宽度进行模运算，获取所述HTML列表两侧HTML页面的空白宽度。
具体的，所述空白宽度blankWidth的计算公式为：blankWidth＝boxWidth％defWidth。
在上述实施例的基础上，本实施例中所述步骤S3中根据所述实际宽度对所述HTML列表进行布局的步骤具体包括：构建style标签样式字符串，将所述style标签样式字符串插入预设DIV中；根据所述列表项的实际宽度，更新所述style标签样式字符串中的列表项实际宽度。
具体地，通过更新所述列表项的样式实现对所述列表布局。所述列表项的样式可能存在于内联样式表、嵌入样式表或外部样式表中，通过更改所述内联样式表、嵌入样式表或外部样式表中列表项的样式，从而实现对所述列表进行布局。由于内联样式表的优先级大于嵌入样式表的优先级，嵌入样式表的优先级大于外部样式表的优先级。因此，本实施例更新所述列表项的内联样式，如果所述列表项的样式存在于嵌入样式表或外部样式表中，则嵌入样式表或外部样式表中所述列表的样式被覆盖。所述style标签样式字符串为"<style>.item{width:"+realWidth+"}</style>"，将所述style标签样式字符串插入预设DIV中，即：
var div＝document.getElementById('div')；
div.innerHTML＝"<style>.item{width:"+realWidth+"}</style>"；
将所述列表项的实际宽度赋值给所述style标签样式字符串中的列表项实际宽度，根据所述style标签样式字符串渲染所述HTML页面，从而实现所述列表的布局。也可以直接通过更改嵌入样式表或外部样式表中所述列表项的样式，从而实现对所述列表进行布局。
本实施例通过更新所述列表项的内联样式，由于内联样式表的优先级大于嵌入样式表的优先级，嵌入样式表的优先级大于外部样式表的优先级，从而提高列表自适应布局的稳定性。
在本发明的另一个实施例中提供一种HTML中列表自适应布局装置，图2为本发明实施例提供的HTML中列表自适应布局装置结构示意图，该装置包括划第一获取单元1、第二获取单元2和第三获取单元3，其中：
所述第一获取单元1用于根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；所述第二获取单元2用于根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；所述第三获取单元3用于将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
具体地，所述装置还包括监听单元，所述监听单元用于监听用户更改浏览器大小的操作，若监听到用户更改浏览器大小的操作，则执行获取补白因子的操作。由于不同用户的显示设备的尺寸不同，像素大小不同，浏览器的宽度也不同，用户需要缩放浏览器的大小调整显示效果。
所述列表可以为有序列表ol、无序列表ul或定义列表dl。一个列表中包含多个列表项，所述列表项内部可以使用段落、换行符、图片、链表以及其他列表等。所述列表项以浮动方式布局，即所述列表项的样式为float:left或float:right。所述列表项的预设宽度，如defWidth，为预先设置的列表项的宽度，一般根据大多数浏览器的尺寸进行设置。所述补白因子用于确定是否增加列数。所述第一获取单元1根据HTML页面中一行最多能展示列表的列表项的第一列数和所述列表项的预设宽度获取所述补白因子。所述第一列数为整数。
所述空白为所述列表两侧没有被所述列表填充的HTML页面。所述第二获取单元2将所述补白因子与所述列表两侧HTML页面的空白宽度进行比较，根据比较结果确认所述列表项的第二列数。
所述第三获取单元3调用JavaScript获取用户浏览器的HTML页面的当前宽度，如boxWidth。将所述HTML页面的当前宽度除以所述列表项的第二列数，获取所述列表项的实际宽度，所述列表项的实际宽度通过JavaScript计算获取。根据所述实际宽度更新所述列表项的样式，实现对所述列表的重新布局。
本实施例根据补白因子与列表两侧HTML页面的空白宽度的比较结果确定列表项的列数，使用所述HTML页面的当前宽度除以确定的列表项列数获取列表项的实际宽度，根据实际宽度对列表进行布局，一方面，使列表更合理地铺满HTML整个页面，且重新计算的实际宽度与预设宽度相比稍微减少，展示更多内容，而不会随着HTML页面宽度的变化出现太多波动，从而使列表项的宽度大小得到控制，保持页面的美观性和易浏览性。
在上述实施例的基础上，本实施例中所述装置还包括第四获取单元，用于将所述HTML页面的当前宽度除以所述列表项的预设宽度，获取所述HTML页面一行最多能展示HTML列表的列表项的第一列数。
在上述实施例的基础上，本实施例中所述第二获取单元具体用于：对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子大于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数加1，获取第二列数。
在上述实施例的基础上，本实施例中所述第二获取单元具体用于：对所述补白因子与所述HTML列表两侧HTML页面的空白宽度进行比较，当所述比较结果为所述补白因子小于或等于所述HTML列表两侧HTML页面的空白宽度时，将所述第一列数作为所述第二列数。
在上述实施例的基础上，本实施例中所述补白因子通过下式获取：
factor＝(1-1/column)*defWidth；
其中，factor为所述补白因子，column为所述列表项的第一列数，defWidth为所述列表项的预设宽度。
在上述实施例的基础上，本实施例中所述装置还包括第五获取单元，用于对所述HTML页面的当前宽度和所述列表项的预设宽度进行模运算，获取所述HTML列表两侧HTML页面的空白宽度。
在上述任一实施例的基础上，本实施例中所述第三获取单元具体用于：构建style标签样式字符串，将所述style标签样式字符串插入预设DIV中；根据所述列表项的实际宽度，更新所述style标签样式字符串中的列表项实际宽度。
本实施例提供一种HTML中列表自适应布局设备，图3为本发明实施例提供的HTML中列表自适应布局设备结构示意图，该设备包括：至少一个处理器31、至少一个存储器32和总线33；其中，
所述处理器31和存储器32通过所述总线33完成相互间的通信；
所述存储器32存储有可被所述处理器31执行的程序指令，所述处理器调用所述程序指令能够执行上述各方法实施例所提供的方法，例如包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
本实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述各方法实施例所提供的方法，例如包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所描述的HTML中列表自适应布局设备实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后，本申请的方法仅为较佳的实施方案，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (10)
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为所述列表项的第一列数，defWidth为所述列表项的预设宽度。
6.根据权利要求1-4任一所述的HTML中列表自适应布局方法，其特征在于，所述步骤S2之前还包括：
对所述HTML页面的当前宽度和所述列表项的预设宽度进行模运算，获取所述HTML列表两侧HTML页面的空白宽度。
7.根据权利要求1-4任一所述的HTML中列表自适应布局方法，其特征在于，所述步骤S3中根据所述实际宽度对所述HTML列表进行布局的步骤具体包括：
构建style标签样式字符串，将所述style标签样式字符串插入预设DIV中；
根据所述列表项的实际宽度，更新所述style标签样式字符串中列表项的实际宽度。
8.一种HTML中列表自适应布局装置，其特征在于，包括：
第一获取单元，用于根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；
第二获取单元，用于根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；
第三获取单元，用于将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
9.一种HTML中列表自适应布局设备，其特征在于，包括：
至少一个处理器、至少一个存储器和总线；其中，
所述处理器和存储器通过所述总线完成相互间的通信；
所述存储器存储有可被所述处理器执行的程序指令，所述处理器调用所述程序指令能够执行如权利要求1至7任一所述的方法。
10.一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至7任一所述的方法。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710697576.1A CN107562455B (zh) | 2017-08-15 | 2017-08-15 | 一种html列表自适应布局方法及装置 |
| PCT/CN2017/120145 WO2019033684A1 (zh) | 2017-08-15 | 2017-12-29 | 一种html中列表自适应布局方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710697576.1A CN107562455B (zh) | 2017-08-15 | 2017-08-15 | 一种html列表自适应布局方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107562455A true CN107562455A (zh) | 2018-01-09 |
| CN107562455B CN107562455B (zh) | 2019-11-05 |
Family
ID=60975517
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710697576.1A Active CN107562455B (zh) | 2017-08-15 | 2017-08-15 | 一种html列表自适应布局方法及装置 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN107562455B (zh) |
| WO (1) | WO2019033684A1 (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109164999A (zh) * | 2018-08-29 | 2019-01-08 | 郑州云海信息技术有限公司 | 一种表格自适应显示的方法、装置、设备及可读存储介质 |
| CN109522497A (zh) * | 2018-10-25 | 2019-03-26 | 北京奇虎科技有限公司 | 一种新闻网页页面的适配显示方法及装置 |
| CN111857718A (zh) * | 2020-07-29 | 2020-10-30 | 网易（杭州）网络有限公司 | 列表的编辑方法、装置、设备及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050273762A1 (en) * | 2004-06-02 | 2005-12-08 | Lesh Joseph C | Systems and methods for dynamic menus |
| CN102929603A (zh) * | 2012-09-28 | 2013-02-13 | 用友软件股份有限公司 | 界面控件布局装置和界面控件布局方法 |
| CN105224564A (zh) * | 2014-06-25 | 2016-01-06 | 广州市动景计算机科技有限公司 | 一种网页适应屏幕排版方法及装置 |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090183068A1 (en) * | 2008-01-14 | 2009-07-16 | Sony Ericsson Mobile Communications Ab | Adaptive column rendering |
| CN103942202B (zh) * | 2013-01-18 | 2018-01-30 | 腾讯科技（深圳）有限公司 | 网页文本域高度自适应缩放方法及装置 |
| CN103605502B (zh) * | 2013-08-08 | 2017-08-04 | 北京九恒星科技股份有限公司 | 表单页面显示方法及服务器 |
| CN106407261A (zh) * | 2016-08-24 | 2017-02-15 | 上海斐讯数据通信技术有限公司 | 一种页面自适应屏幕的方法及智能终端 |
-
2017
- 2017-08-15 CN CN201710697576.1A patent/CN107562455B/zh active Active
- 2017-12-29 WO PCT/CN2017/120145 patent/WO2019033684A1/zh active Application Filing
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050273762A1 (en) * | 2004-06-02 | 2005-12-08 | Lesh Joseph C | Systems and methods for dynamic menus |
| CN102929603A (zh) * | 2012-09-28 | 2013-02-13 | 用友软件股份有限公司 | 界面控件布局装置和界面控件布局方法 |
| CN105224564A (zh) * | 2014-06-25 | 2016-01-06 | 广州市动景计算机科技有限公司 | 一种网页适应屏幕排版方法及装置 |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109164999A (zh) * | 2018-08-29 | 2019-01-08 | 郑州云海信息技术有限公司 | 一种表格自适应显示的方法、装置、设备及可读存储介质 |
| CN109522497A (zh) * | 2018-10-25 | 2019-03-26 | 北京奇虎科技有限公司 | 一种新闻网页页面的适配显示方法及装置 |
| CN111857718A (zh) * | 2020-07-29 | 2020-10-30 | 网易（杭州）网络有限公司 | 列表的编辑方法、装置、设备及存储介质 |
| CN111857718B (zh) * | 2020-07-29 | 2024-04-09 | 网易（杭州）网络有限公司 | 列表的编辑方法、装置、设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2019033684A1 (zh) | 2019-02-21 |
| CN107562455B (zh) | 2019-11-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10366155B2 (en) | Method and apparatus for displaying data grids | |
| CN105373567B (zh) | 页面生成方法及客户端 | |
| CA2773152C (en) | A method for users to create and edit web page layouts | |
| US7412644B2 (en) | System and process for delivering and rendering scalable web pages | |
| US10380778B2 (en) | Automated chart generation within a document generation application using heuristic model with predefined data types | |
| US11216253B2 (en) | Application prototyping tool | |
| CN105094804B (zh) | 在页面中添加动画的方法和装置 | |
| US20060117051A1 (en) | Method of displaying data in a table | |
| US20080077879A1 (en) | Interface with multiple rows of tabs having tabs at fixed relative positions | |
| US20140059488A1 (en) | System and method for viewing selected descendant nodes in a tree hierarchy displayed in tabular form | |
| CN107562455A (zh) | 一种html中列表自适应布局方法及装置 | |
| US20060174187A1 (en) | System and method for a look and feel designer with a page-view interface | |
| CN109299449A (zh) | 表格处理方法、装置、电子设备及可读存储介质 | |
| US20060174195A1 (en) | System and method for a look and feel designer with a style sheet editor | |
| CN107368546A (zh) | 一种生成文章大纲的方法和装置 | |
| CN104714802A (zh) | 一种显示html元素的附加信息的方法和装置 | |
| CN110020291A (zh) | 网页布局的处理方法及装置 | |
| Grannell et al. | The essential guide to HTML5 and CSS3 web design | |
| CN110309449A (zh) | 页面渲染方法及装置 | |
| CN111061980A (zh) | 一种基于bfc特性的自适应布局方法 | |
| Aryal | Bootstrap: a front-end framework for responsive web design | |
| Pasha | Responsive web design: present and future | |
| Krunić | Issues in adapting web content to be displayed on devices with various screen shapes using a JavaScript built screen shape simulator | |
| Dowden et al. | Layouts | |
| US20140298163A1 (en) | Enabling Absolute Positioning with Publishable HTML Code |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231221 Address after: No. 102 Aokema Street, Laishan District, Yantai City, Shandong Province, 264000, Yantai High level Talent Entrepreneurship Park 201 Patentee after: Yantai Junye Network Technology Co.,Ltd. Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. |