WO2019033684A1 - 一种html中列表自适应布局方法及装置 - Google Patents

一种html中列表自适应布局方法及装置 Download PDF

Info

Publication number
WO2019033684A1
WO2019033684A1 PCT/CN2017/120145 CN2017120145W WO2019033684A1 WO 2019033684 A1 WO2019033684 A1 WO 2019033684A1 CN 2017120145 W CN2017120145 W CN 2017120145W WO 2019033684 A1 WO2019033684 A1 WO 2019033684A1
Authority
WO
WIPO (PCT)
Prior art keywords
list
html
width
list item
column number
Prior art date
Application number
PCT/CN2017/120145
Other languages
English (en)
French (fr)
Inventor
易春宝
张文明
陈少杰
Original Assignee
武汉斗鱼网络科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 武汉斗鱼网络科技有限公司 filed Critical 武汉斗鱼网络科技有限公司
Publication of WO2019033684A1 publication Critical patent/WO2019033684A1/zh

Links

Images

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

Definitions

  • Embodiments of the present invention relate to software development technologies, and in particular, to a list adaptive layout method and apparatus in HTML.
  • Hypertext in HTML means that non-text elements such as images, links, music, and programs can be included in the page. It marks each part of the web page to be displayed by a marker symbol.
  • the HTML list contains multiple list items. List adaptive layout in HTML means that when the screen size changes, the HTML list automatically presents different layouts according to the screen size.
  • the general list adaptive layout has two ways.
  • One way is that the width of the list item is fixed pixels, and the floating (float:left or float:right) layout is adopted.
  • the last list item is automatically Wrap to the next line;
  • another way is to use the percentage indicator for the width of the list item, and the list item dynamically zooms in or out as the width of the HTML page changes.
  • the number of columns of the list item increases or decreases with the width of the HTML page, and since the width of the list item is fixed, when the width of the HTML page changes, blank spaces appear on the left and right sides of the HTML page.
  • the width of the list item because the width of the list item is used, when the width of the HTML page is small, the width of the list item will become smaller, which is not conducive to user browsing; when the width of the user's HTML page is large, the list is The width of the item will become large, which is not conducive to the display and browsing of more data, and affects the beauty of the HTML page.
  • the purpose of the present application is to provide a method and apparatus for adaptively arranging lists in HTML, which can improve the problem that the list adaptive layout technology in the existing HTML is unsightly and difficult to browse.
  • an embodiment of the present application provides a list adaptive layout method in HTML, including:
  • the method further includes:
  • step S2 specifically includes:
  • the first column is Add 1 to the number to get the second column number.
  • step S2 specifically includes:
  • a column number is used as the second column number.
  • the filler factor is obtained by:
  • factor is the filler factor
  • column is the first column number of the list item
  • defWidth is the preset width of the list item.
  • the method further includes:
  • the step of laying out the HTML list according to the actual width in the step S3 specifically includes:
  • an embodiment of the present application further provides a list adaptive layout device in HTML, including:
  • a first obtaining unit configured to obtain a filler factor according to a first column number of a list item of the HTML list that can display the HTML list in a row and a preset width of the list item;
  • a second obtaining unit configured to obtain a second column number of the list item according to a comparison result between the filler factor and a blank width of an HTML page on both sides of the HTML list;
  • a third obtaining unit configured to divide the current width of the HTML page by the second column number, obtain an actual width of the list item, and layout the HTML list according to the actual width.
  • an embodiment of the present application further provides a list adaptive layout device in HTML, including:
  • At least one processor at least one memory, and a bus;
  • the processor and the memory complete communication with each other through the bus;
  • the memory stores program instructions executable by the processor, the processor invoking the program instructions to perform the method as previously described.
  • an embodiment of the present application also provides a computer program comprising program code for performing the method described above.
  • an embodiment of the present application further provides a storage medium for storing a computer program as described above.
  • the list adaptive layout method in HTML determines the number of columns of the list item according to the comparison result of the fill factor and the blank width of the HTML pages on both sides of the list, and divides the determined list item by using the current width of the HTML page.
  • the number of columns gets the actual width of the list item, and the list is laid out according to the actual width, so that the list fits the entire HTML page more reasonably and displays more content without too much fluctuations as the width of the HTML page changes.
  • the width of the list item is controlled to maintain the aesthetics and ease of browsing of the page.
  • FIG. 1 is a schematic flowchart of a method for adaptive layout of a list in HTML according to an embodiment of the present invention
  • FIG. 2 is a schematic structural diagram of an apparatus for adaptively arranging lists in HTML according to an embodiment of the present invention
  • FIG. 3 is a schematic structural diagram of a list adaptive layout device in HTML according to an embodiment of the present invention.
  • FIG. 1 is a schematic flowchart of a method for adaptively configuring a list in an HTML according to an embodiment of the present invention.
  • the method includes: S1, according to a row in an HTML page. The first column number of the list item of the HTML list and the preset width of the list item are obtained, and the filler factor is obtained; S2, according to the comparison result of the filler factor and the blank width of the HTML pages on both sides of the HTML list, a second column number of the list item; S3, dividing a current width of the HTML page by the second column number, obtaining an actual width of the list item, and laying out the HTML list according to the actual width .
  • the method further includes adding an event listener, monitoring an operation of changing a browser size by the user, and performing an operation of S1 if the user changes the size of the browser. Since the display devices of different users are different in size, the pixel size is different, and the width of the browser is different, the user needs to scale the size of the browser to adjust the display effect.
  • the list may be an ordered list ol, an unordered list ul or a defined list dl.
  • a list contains multiple list items, which can use paragraphs, line breaks, pictures, linked lists, and other lists.
  • the list item is laid out in a floating manner, that is, the style of the list item is float:left or float:right.
  • the preset width of the list item such as defWidth, is the width of a preset list item, and is generally set according to the size of most browsers.
  • the fill factor is used to determine whether to increase the number of columns.
  • the filler factor is obtained according to a first column number of a list item that can be displayed in a row in the HTML page and a preset width of the list item.
  • the first column number is an integer.
  • the blank is an HTML page on both sides of the list that is not filled by the list.
  • the filler factor is compared with the blank width of the HTML pages on both sides of the list, and the second column number of the list item is obtained according to the comparison result.
  • JavaScript is called to get the current width of the HTML page of the user's browser, such as boxWidth.
  • the actual width of the list item is obtained by dividing the current width of the HTML page by the second column number of the list item, and the actual width of the list item is obtained by JavaScript calculation. Re-layout of the list is performed according to the actual width of the list item.
  • the ⁇ ul> tag indicates a list
  • the ⁇ li> tag indicates a list item
  • the number of columns of the list item is determined according to the comparison result of the filler factor and the blank width of the HTML pages on both sides of the list, and the actual width of the list item is obtained by dividing the current width of the HTML page by the determined number of the list items, according to the actual Width lays out the list.
  • the list makes the list more reasonable to cover the entire page of HTML, showing more content, and does not fluctuate too much as the width of the HTML page changes, so that the width of the list item is controlled. Keep the page beautiful and easy to navigate.
  • the method further includes: dividing a current width of the HTML page by a preset width of the list item, and obtaining a maximum of one HTML in the HTML page. The first number of columns in the list item of the list.
  • the step S2 in the embodiment specifically includes: comparing the filler factor with a blank width of an HTML page on both sides of the HTML list, when the comparison result is that the filler factor is greater than
  • the first column number is incremented by one to obtain the second column number.
  • the current width of the HTML page is divided by the second column number to obtain the actual width of the list, and the second column number is the first column number plus 1, according to the actual width of the list layout, on the one hand, make the list spread the entire page of HTML, and the actual width of the recalculation is slightly reduced compared to the preset width, the change is not large, and will not change with the width of the HTML page There are too many fluctuations, so that the width of the list item is controlled, keeping the page beautiful and easy to browse.
  • the step S2 in the embodiment specifically includes: comparing the filler factor with a blank width of an HTML page on both sides of the HTML list, when the comparison result is that the filler factor is less than Or equal to the blank width of the HTML page on both sides of the HTML list, the first column number is used as the second column number.
  • the first column number is used as the second column number, that is, the current width of the HTML page is directly divided by the The first column number is obtained, the actual width of the list item is obtained, and the style of the list item is updated according to the actual width of the list item, thereby realizing re-layout of the list.
  • the actual width of the list item is realWidth.
  • the current width of the HTML page is divided by the first column number, the actual width of the list is obtained, and the list is laid out according to the actual width.
  • the list is spread over the entire HTML page, and the actual width of the recalculation is slightly increased compared to the preset width, with little change, and does not fluctuate too much as the width of the HTML page changes, thereby making the width of the list item wider.
  • the size is controlled to keep the page beautiful and easy to navigate.
  • the filler factor in the embodiment is obtained by the following formula:
  • factor is the filler factor
  • column is the first column number of the list item
  • defWidth is the preset width of the list item.
  • the filler factor is used to compare with the blank width, and according to the comparison result, it is determined whether to increase the number of columns, and the actual width obtained by the determined filling form is different from the preset width, and does not vary with the width of the HTML page. There are too many fluctuations in the changes, so that the width of the list items is controlled, keeping the page beautiful and easy to navigate.
  • the method further includes: performing a modulo operation on a current width of the HTML page and a preset width of the list item, and acquiring an HTML page on both sides of the HTML list. The width of the blank.
  • blankWidth boxWidth%defWidth.
  • the step of laying out the HTML list according to the actual width in the step S3 in the embodiment includes: constructing a style label style string, and inserting the style label style string Presetting the DIV; updating the actual width of the list item in the style tag style string according to the actual width of the list item.
  • the list layout is implemented by updating the style of the list item.
  • the style of the list item may exist in an inline style sheet, an embedded style sheet, or an outer style sheet, by changing a style of the list item in the inline style sheet, the embedded style sheet, or the outer style sheet, thereby implementing the The list is laid out. Since the priority of the inline style sheet is greater than the priority of the embedded style sheet, the priority of the embedded style sheet is greater than the priority of the external style sheet. Therefore, the embodiment updates the inline style of the list item, and if the style of the list item exists in the embedded style sheet or the outer style sheet, the style of the list in the embedded style sheet or the outer style sheet is overwritten.
  • the style tag style string is " ⁇ style>.item ⁇ width:"+realWidth+" ⁇ /style>", and the style tag style string is inserted into the preset DIV, namely:
  • Var div document.getElementById('div');
  • the priority of the embedded style sheet is greater than the priority of the external style sheet, thereby improving the list adaptive layout. Stability.
  • FIG. 2 is a schematic structural diagram of a list adaptive layout device in HTML according to an embodiment of the present invention, where the device includes a first acquisition unit 1 Two acquisition unit 2 and third acquisition unit 3, wherein:
  • the first obtaining unit 1 is configured to obtain a filler factor according to a first column number of a list item of the HTML list that can display the HTML list in a row and a preset width of the list item;
  • the second obtaining unit 2 is configured to: Obtaining a second column number of the list item according to a result of comparing the blanking factor with a blank width of an HTML page on both sides of the HTML list;
  • the third obtaining unit 3 is configured to divide the current width of the HTML page Obtaining the actual width of the list item in the second column number, and laying out the HTML list according to the actual width.
  • the device further includes an intercepting unit, configured to monitor an operation of changing a browser size by the user, and if an operation of changing a browser size by the user is monitored, performing an operation of acquiring a filler factor. Since the display devices of different users are different in size, the pixel size is different, and the width of the browser is different, the user needs to scale the size of the browser to adjust the display effect.
  • the list may be an ordered list ol, an unordered list ul or a defined list dl.
  • a list contains multiple list items, which can use paragraphs, line breaks, pictures, linked lists, and other lists.
  • the list item is laid out in a floating manner, that is, the style of the list item is float:left or float:right.
  • the preset width of the list item such as defWidth, is the width of a preset list item, and is generally set according to the size of most browsers.
  • the fill factor is used to determine whether to increase the number of columns.
  • the first obtaining unit 1 acquires the filler factor according to a first column number of a list item of a list that can display a list at most in an HTML page and a preset width of the list item.
  • the first column number is an integer.
  • the blank is an HTML page that is not populated by the list on both sides of the list.
  • the second obtaining unit 2 compares the filler factor with the blank width of the HTML pages on both sides of the list, and confirms the second column number of the list item according to the comparison result.
  • the third obtaining unit 3 calls JavaScript to obtain the current width of the HTML page of the user's browser, such as boxWidth.
  • the actual width of the list item is obtained by dividing the current width of the HTML page by the second column number of the list item, and the actual width of the list item is obtained by JavaScript calculation. Re-layout of the list is performed according to the actual width of the list item.
  • the number of columns of the list item is determined according to the comparison result of the filler factor and the blank width of the HTML pages on both sides of the list, and the actual width of the list item is obtained by dividing the current width of the HTML page by the determined number of the list items, according to the actual Width lays out the list.
  • the list fits the entire HTML page more reasonably, and the actual width of the recalculation is slightly reduced compared to the preset width, showing more content without changing the width of the HTML page. There are too many fluctuations, so that the width of the list item is controlled, keeping the page beautiful and easy to browse.
  • the device in this embodiment further includes a fourth acquiring unit, configured to divide a current width of the HTML page by a preset width of the list item, and obtain the most The first number of columns of a list item that can display an HTML list.
  • the second obtaining unit in the embodiment is specifically configured to: compare the filler factor with a blank width of an HTML page on both sides of the HTML list, when the comparison result is the When the filler factor is greater than the blank width of the HTML page on both sides of the HTML list, the first column number is incremented by one to obtain the second column number.
  • the second obtaining unit in the embodiment is specifically configured to: compare the filler factor with a blank width of an HTML page on both sides of the HTML list, when the comparison result is the When the filler factor is less than or equal to the blank width of the HTML pages on both sides of the HTML list, the first column number is used as the second column number.
  • the filler factor in the embodiment is obtained by the following formula:
  • factor is the filler factor
  • column is the first column number of the list item
  • defWidth is the preset width of the list item.
  • the device in this embodiment further includes a fifth obtaining unit, configured to perform a modulo operation on a current width of the HTML page and a preset width of the list item, to obtain the HTML list.
  • the third obtaining unit is specifically configured to: construct a style label style string, and insert the style label style string into a preset DIV; according to the list item The actual width of the list item in the style tag style string is updated.
  • FIG. 3 is a schematic structural diagram of a list adaptive layout device in HTML according to an embodiment of the present invention.
  • the device includes: at least one processor 31, at least one memory 32, and a bus 33. ;among them,
  • the processor 31 and the memory 32 complete communication with each other through the bus 33;
  • the memory 32 stores program instructions that are executable by the processor 31, and the processor calls the program instructions to perform the methods provided by the foregoing method embodiments, for example, including: S1, according to a row in the HTML page. The first column number of the list item of the HTML list and the preset width of the list item are obtained, and the filler factor is obtained; S2, according to the comparison result of the filler factor and the blank width of the HTML pages on both sides of the HTML list, a second column number of the list item; S3, dividing a current width of the HTML page by the second column number, obtaining an actual width of the list item, and laying out the HTML list according to the actual width .
  • the embodiment discloses a computer program product comprising a computer program stored on a non-transitory computer readable storage medium, the computer program comprising program instructions, when the program instructions are executed by a computer, the computer
  • the method provided in each of the foregoing method embodiments is provided, for example, comprising: S1, obtaining a filler factor according to a first column number of a list item of a list of HTML lists in a HTML page and a preset width of the list item; Obtaining a second column number of the list item according to a result of comparing the blanking factor with a blank width of an HTML page on both sides of the HTML list; S3, dividing a current width of the HTML page by the second column Number, obtaining the actual width of the list item, and laying out the HTML list according to the actual width.
  • the embodiment provides a non-transitory computer readable storage medium, the non-transitory computer readable storage medium storing computer instructions, the computer instructions causing the computer to perform the methods provided by the foregoing method embodiments, including, for example, : S1, obtaining a filler factor according to a first column number of a list item of the HTML list that can display the HTML list in a row, and a preset width of the list item; S2, according to the filler factor and the HTML of the HTML list a comparison result of the blank width of the page, the second column number of the list item is obtained; S3, the current width of the HTML page is divided by the second column number, and the actual width of the list item is obtained, according to the The actual width is laid out for the HTML list.
  • the foregoing program may be stored in a computer readable storage medium, and the program is executed when executed.
  • the foregoing steps include the steps of the foregoing method embodiments; and the foregoing storage medium includes: a medium that can store program codes, such as a ROM, a RAM, a magnetic disk, or an optical disk.
  • the embodiments of the list adaptive layout device and the like described in the above are merely illustrative, wherein the units described as separate components may or may not be physically separated, and the components displayed as the unit may be or may be It is not a physical unit, it can be located in one place, or it can be distributed to multiple network units. Some or all of the modules may be selected according to actual needs to achieve the purpose of the solution of the embodiment. Those of ordinary skill in the art can understand and implement without deliberate labor.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种HTML中列表自适应布局方法及装置
交叉引用
本申请引用于2017年8月15日提交的专利名称为“一种HTML中列表自适应布局方法及装置”的第2017106975761号中国专利申请，其通过引用被全部并入本申请。
技术领域
本发明的实施例涉及软件开发技术，尤其涉及一种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列表进行布局。
本实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述各方法实施例所提供的方法，例如包括：S1，根据HTML页面中一行最多能展示HTML列表的列表项的第一列数和所述列表项的预设宽度，获取补白因子；S2，根据所述补白因子与所述HTML列表两侧HTML页面的空白宽度的比较结果，获取所述列表项的第二列数；S3，将所述HTML页面的当前宽度除以所述第二列数，获取所述列表项的实际宽度，根据所述实际宽度对所述HTML列表进行布局。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于一计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所描述的HTML中列表自适应布局设备等实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通 过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上各实施例仅用以说明本发明的实施例的技术方案，而非对其限制；尽管参照前述各实施例对本发明的实施例进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明的实施例各实施例技术方案的范围。

Claims (11)

  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任一所述的方法。
  11. 一种非暂态计算机可读存储介质，其特征在于，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行如权利要求1至7任一所述的方法。
PCT/CN2017/120145 2017-08-15 2017-12-29 一种html中列表自适应布局方法及装置 WO2019033684A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201710697576.1 2017-08-15
CN201710697576.1A CN107562455B (zh) 2017-08-15 2017-08-15 一种html列表自适应布局方法及装置

Publications (1)

Publication Number Publication Date
WO2019033684A1 true WO2019033684A1 (zh) 2019-02-21

Family

ID=60975517

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/120145 WO2019033684A1 (zh) 2017-08-15 2017-12-29 一种html中列表自适应布局方法及装置

Country Status (2)

Country Link
CN (1) CN107562455B (zh)
WO (1) WO2019033684A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109164999B (zh) * 2018-08-29 2022-03-08 郑州云海信息技术有限公司 一种表格自适应显示的方法、装置、设备及可读存储介质
CN109522497A (zh) * 2018-10-25 2019-03-26 北京奇虎科技有限公司 一种新闻网页页面的适配显示方法及装置
CN111857718B (zh) * 2020-07-29 2024-04-09 网易（杭州）网络有限公司 列表的编辑方法、装置、设备及存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090183068A1 (en) * 2008-01-14 2009-07-16 Sony Ericsson Mobile Communications Ab Adaptive column rendering
CN103605502A (zh) * 2013-08-08 2014-02-26 北京九恒星科技股份有限公司 表单页面显示方法及服务器
CN103942202A (zh) * 2013-01-18 2014-07-23 腾讯科技（深圳）有限公司 网页文本域高度自适应缩放方法及装置
CN105224564A (zh) * 2014-06-25 2016-01-06 广州市动景计算机科技有限公司 一种网页适应屏幕排版方法及装置
CN106407261A (zh) * 2016-08-24 2017-02-15 上海斐讯数据通信技术有限公司 一种页面自适应屏幕的方法及智能终端

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8645848B2 (en) * 2004-06-02 2014-02-04 Open Text S.A. Systems and methods for dynamic menus
CN102929603B (zh) * 2012-09-28 2015-04-15 用友软件股份有限公司 界面控件布局装置和界面控件布局方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090183068A1 (en) * 2008-01-14 2009-07-16 Sony Ericsson Mobile Communications Ab Adaptive column rendering
CN103942202A (zh) * 2013-01-18 2014-07-23 腾讯科技（深圳）有限公司 网页文本域高度自适应缩放方法及装置
CN103605502A (zh) * 2013-08-08 2014-02-26 北京九恒星科技股份有限公司 表单页面显示方法及服务器
CN105224564A (zh) * 2014-06-25 2016-01-06 广州市动景计算机科技有限公司 一种网页适应屏幕排版方法及装置
CN106407261A (zh) * 2016-08-24 2017-02-15 上海斐讯数据通信技术有限公司 一种页面自适应屏幕的方法及智能终端

Also Published As

Publication number Publication date
CN107562455A (zh) 2018-01-09
CN107562455B (zh) 2019-11-05

Similar Documents

Publication Publication Date Title
JP5384949B2 (ja) ウェブページにおけるテーブルのローカル・ローリング表示を実現する方法およびシステム
CN102663126B (zh) 一种在移动终端中显示网页的方法及装置
US7412644B2 (en) System and process for delivering and rendering scalable web pages
US11170159B1 (en) System and method for using a dynamic webpage editor
US10366155B2 (en) Method and apparatus for displaying data grids
US10339209B2 (en) Webpage display method and device
US20060117051A1 (en) Method of displaying data in a table
US10387551B2 (en) Techniques for programmatic magnification of visible content elements of markup language documents
US20130305145A1 (en) A Method of Publishing Digital Content
US20080104091A1 (en) Method of displaying data in a table
CN104217037B (zh) 一种在移动终端中显示网页的方法及装置
WO2019033684A1 (zh) 一种html中列表自适应布局方法及装置
WO2015196822A1 (zh) 一种网页适应屏幕排版方法及装置
US20150106751A1 (en) Systems And Methods For Creating And Serving Dynamically Adjustable Web Pages
US20120212501A1 (en) Automated method for customizing theme colors in a styling system
US10599754B2 (en) Context editing without interfering with target page
CN108228121A (zh) 一种浏览器分屏的方法、装置及移动终端
CN109299449A (zh) 表格处理方法、装置、电子设备及可读存储介质
CN103136175A (zh) Epub格式读物的分页方法及系统
KR101797573B1 (ko) 웹 기반의 스프레드시트 서비스 제공 장치 및 방법
KR20160113135A (ko) 웹 기반 애플리케이션에서 편집하기 위한 문서의 인쇄 뷰를 제공하는 기법
US20140258847A1 (en) Systems and methods for displaying content with discrete content zones
WO2015017517A1 (en) Mechanism for setting ascent and baseline for html elements
CN113687809A (zh) 信息显示方法及装置、以及电子设备和可读存储介质
US9213681B2 (en) Method and system to modify source content to fit into a target display area in a browser

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17921973

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17921973

Country of ref document: EP

Kind code of ref document: A1