[發(fā)明專利]一種HTML列表自適應(yīng)布局方法及裝置

有效

• 申請?zhí)枺?/td>: 201710697576.1
• 申請日: 2017-08-15
• 公開（公告）號: CN107562455B
• 公開（公告）日: 2019-11-05
• 發(fā)明（設(shè)計）人: 易春寶;張文明;陳少杰
• 申請（專利權(quán)）人: 武漢斗魚網(wǎng)絡(luò)科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 北京路浩知識產(chǎn)權(quán)代理有限公司 11002
• 代理人: 王瑩;吳歡燕

本發(fā)明提供一種HTML中列表自適應(yīng)布局方法及裝置，所述方法包括：S1，根據(jù)HTML頁面中一行最多能展示HTML列表的列表項(xiàng)的第一列數(shù)和所述列表項(xiàng)的預(yù)設(shè)寬度，獲取補(bǔ)白因子；S2，根據(jù)所述補(bǔ)白因子與所述HTML列表兩側(cè)HTML頁面的空白寬度的比較結(jié)果，獲取所述列表項(xiàng)的第二列數(shù)；S3，將所述HTML頁面的當(dāng)前寬度除以所述第二列數(shù)，獲取所述列表項(xiàng)的實(shí)際寬度，根據(jù)所述實(shí)際寬度對所述HTML列表進(jìn)行布局。本發(fā)明使列表更合理地鋪滿HTML整個頁面，展示更多內(nèi)容，而不會隨著HTML頁面寬度的變化出現(xiàn)太多波動，從而使列表項(xiàng)的寬度大小得到控制，保持頁面的美觀性和易瀏覽性。

技術(shù)領(lǐng)域

本發(fā)明涉及軟件開發(fā)領(lǐng)域，更具體地，涉及一種HTML列表自適應(yīng)布局方法及裝置。

背景技術(shù)

HTML(HyperText Markup Language，超文本標(biāo)記語言)中的超文本是指頁面內(nèi)可以包含圖片、鏈接、音樂和程序等非文字元素。它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分。HTML列表包含多個列表項(xiàng)。HTML列表自適應(yīng)布局是指當(dāng)屏幕大小改變時，HTML列表自動根據(jù)屏幕大小呈現(xiàn)不同布局。

目前，通用的列表自適應(yīng)布局有兩種方式，一種方式為列表項(xiàng)的寬度為固定像素，采用浮動(float:left或float:right)布局，當(dāng)HTML頁面寬度不夠時，最后一個列表項(xiàng)自動換行到下一行；另一種方式為列表項(xiàng)的寬度使用百分比標(biāo)示，列表項(xiàng)隨著HTML頁面寬度的變化動態(tài)放大或者縮小。

上述第一種方法中，列表項(xiàng)的列數(shù)會隨著HTML頁面的寬度變化增加或減少，且由于列表項(xiàng)寬度固定，當(dāng)HTML頁面寬度變動時HTML頁面左右兩側(cè)會出現(xiàn)空白。第二種方法中，由于列表項(xiàng)的寬度使用百分比，當(dāng)HTML頁面的寬度較小時，列表項(xiàng)的寬度也會隨之變得較小，不利于用戶瀏覽；當(dāng)用戶HTML頁面寬度較大時，列表項(xiàng)的寬度會隨之變得很大，不利于更多數(shù)據(jù)的展示和瀏覽，且影響HTML頁面美觀。

發(fā)明內(nèi)容

為克服上述現(xiàn)有的HTML中列表自適應(yīng)布局技術(shù)存在不美觀和不易瀏覽的問題或者至少部分地解決上述問題，本發(fā)明提供了一種HTML列表自適應(yīng)布局方法及裝置。

根據(jù)本發(fā)明的第一方面，提供一種HTML列表自適應(yīng)布局方法，包括：

S1，根據(jù)HTML頁面中一行最多能展示列表的列表項(xiàng)的第一列數(shù)和所述列表項(xiàng)的預(yù)設(shè)寬度，獲取補(bǔ)白因子；

S2，根據(jù)所述補(bǔ)白因子與所述列表兩側(cè)HTML頁面的空白寬度的比較結(jié)果，獲取所述列表項(xiàng)的第二列數(shù)；

S3，將所述HTML頁面的當(dāng)前寬度除以所述第二列數(shù)，獲取所述列表項(xiàng)的實(shí)際寬度，根據(jù)所述實(shí)際寬度對所述列表進(jìn)行布局。

具體地，所述步驟S1之前還包括：

將所述HTML頁面的當(dāng)前寬度除以所述列表項(xiàng)的預(yù)設(shè)寬度，獲取所述HTML頁面最多能展示列表的列表項(xiàng)的第一列數(shù)。

具體地，所述步驟S2具體包括：

當(dāng)所述比較結(jié)果為所述補(bǔ)白因子大于所述列表兩側(cè)HTML頁面的空白寬度時，將所述第一列數(shù)加1，獲取第二列數(shù)。

具體地，所述步驟S2具體包括：

當(dāng)所述比較結(jié)果為所述補(bǔ)白因子小于或等于所述列表兩側(cè)HTML頁面的空白寬度時，將所述第一列數(shù)作為所述第二列數(shù)。

具體地，所述補(bǔ)白因子通過下式獲取：

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

其中，factor為所述補(bǔ)白因子，column為所述列表項(xiàng)的第一列數(shù)，defWidth為所述列表項(xiàng)的預(yù)設(shè)寬度。

具體地，所述步驟S2之前還包括：