[發(fā)明專利]一種網(wǎng)頁布局方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)

有效

• 申請?zhí)枺?/td>: 202011305090.7
• 申請日: 2020-11-19
• 公開（公告）號(hào): CN112287264B
• 公開（公告）日: 2022-08-12
• 發(fā)明（設(shè)計(jì)）人: 劉凱
• 申請（專利權(quán)）人: 邁普通信技術(shù)股份有限公司
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957
• 代理公司: 北京超凡宏宇專利代理事務(wù)所(特殊普通合伙) 11463
• 代理人: 衡滔

本申請?zhí)峁┮环N網(wǎng)頁布局方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)，該方法包括：獲得網(wǎng)頁中的多個(gè)布局對象；分別計(jì)算出多個(gè)布局對象的每個(gè)布局對象的最大邊長值；按照最大邊長值從大到小的順序?qū)Χ鄠€(gè)布局對象進(jìn)行排序，獲得排序后的多個(gè)布局對象；依次對排序后的多個(gè)布局對象的每個(gè)布局對象進(jìn)行重疊判定和重疊處理，以實(shí)現(xiàn)網(wǎng)頁布局。在上述的實(shí)現(xiàn)過程中，通過根據(jù)多個(gè)布局對象的每個(gè)布局對象的最大邊長值對多個(gè)布局對象進(jìn)行排序，有效地利用了遞進(jìn)式的排列信息，使用遞進(jìn)式的排列方式來避免容易存在空白位置的問題，提高了對網(wǎng)頁進(jìn)行布局的空間利用率，從而實(shí)現(xiàn)了高利用率的網(wǎng)頁自動(dòng)布局。

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

本申請涉及前端開發(fā)和網(wǎng)頁布局的技術(shù)領(lǐng)域，具體而言，涉及一種網(wǎng)頁布局方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)。

背景技術(shù)

超文本標(biāo)記語言(Hyper Text Markup Language，HTML)，是一種標(biāo)準(zhǔn)通用標(biāo)記語言，包括一系列標(biāo)簽。HTML通過標(biāo)簽將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的因特網(wǎng)(Internet)資源連接為一個(gè)邏輯整體，HTML通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容(如：文字如何處理，畫面如何安排，圖片如何顯示等)。

在當(dāng)前的網(wǎng)絡(luò)(web)應(yīng)用開發(fā)過程中，需要針對網(wǎng)頁中的布局對象進(jìn)行合理的布局，才能夠在保持網(wǎng)頁美觀的前提下，讓有限網(wǎng)頁內(nèi)盡可能的展示更多的信息。因此，合理的網(wǎng)頁布局在應(yīng)用開發(fā)過程中顯得尤為重要，然而在具體的實(shí)踐過程中發(fā)現(xiàn)，使用目前的橫向布局、縱向布局、流式布局、瀑布流布局等等自動(dòng)布局方法，其中，橫向布局是依賴于HTML中的行內(nèi)元素標(biāo)簽實(shí)現(xiàn)的自動(dòng)布局，此處的行內(nèi)元素標(biāo)簽例如：img標(biāo)簽和span標(biāo)簽等；縱向布局是依賴于HTML中的塊級(jí)元素標(biāo)簽實(shí)現(xiàn)的自動(dòng)布局，此處的塊級(jí)元素標(biāo)簽例如：div標(biāo)簽和li標(biāo)簽等，而流式布局和瀑布流布局是依賴于層疊樣式表(英文全稱：CascadingStyle Sheets，英文縮寫CSS)的浮動(dòng)樣式實(shí)現(xiàn)的自動(dòng)布局。

上述的這些自動(dòng)布局方法大都依賴于瀏覽器提供的某些特定的層疊樣式表(CSS)樣式來實(shí)現(xiàn)自動(dòng)布局，存在布局對象不夠緊湊或者存在空白位置等等問題，也就是說，使用目前的自動(dòng)布局方法對網(wǎng)頁進(jìn)行布局的空間利用率較低。

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

本申請實(shí)施例的目的在于提供一種網(wǎng)頁布局方法、裝置、電子設(shè)備及存儲(chǔ)介質(zhì)，用于改善對網(wǎng)頁進(jìn)行布局的空間利用率較低的問題。

本申請實(shí)施例提供了一種網(wǎng)頁布局方法，包括：獲得網(wǎng)頁中的多個(gè)布局對象；分別計(jì)算出多個(gè)布局對象的每個(gè)布局對象的最大邊長值；按照最大邊長值從大到小的順序?qū)Χ鄠€(gè)布局對象進(jìn)行排序，獲得排序后的多個(gè)布局對象；依次對排序后的多個(gè)布局對象的每個(gè)布局對象進(jìn)行重疊判定和重疊處理，以實(shí)現(xiàn)網(wǎng)頁布局。在上述的實(shí)現(xiàn)過程中，首先分別計(jì)算出多個(gè)布局對象的每個(gè)布局對象的最大邊長值，然后按照最大邊長值從大到小的順序?qū)Χ鄠€(gè)布局對象進(jìn)行排序，最后依次對排序后的多個(gè)布局對象的每個(gè)布局對象進(jìn)行重疊判定和重疊處理，獲得合理布局的網(wǎng)頁；也就是說，通過根據(jù)多個(gè)布局對象的每個(gè)布局對象的最大邊長值對多個(gè)布局對象進(jìn)行排序，有效地利用了遞進(jìn)式的排列信息，使用遞進(jìn)式的排列方式來避免容易存在空白位置的問題，提高了對網(wǎng)頁進(jìn)行布局的空間利用率，從而實(shí)現(xiàn)了高利用率的網(wǎng)頁自動(dòng)布局。

可選地，在本申請實(shí)施例中，依次對排序后的多個(gè)布局對象的每個(gè)布局對象進(jìn)行重疊判定和重疊處理，包括：判斷排序后的多個(gè)布局對象中的當(dāng)前布局對象與已布局的布局對象是否重疊；若是，則對當(dāng)前布局對象進(jìn)行重疊處理；若否，則對排序后的多個(gè)布局對象中的下一個(gè)布局對象進(jìn)行重疊判定和重疊處理。在上述的實(shí)現(xiàn)過程中，若排序后的多個(gè)布局對象中的當(dāng)前布局對象與已布局的布局對象重疊，則對當(dāng)前布局對象進(jìn)行重疊處理；若排序后的多個(gè)布局對象中的當(dāng)前布局對象與已布局的布局對象沒有重疊，則對排序后的多個(gè)布局對象中的下一個(gè)布局對象進(jìn)行重疊判定和重疊處理；從而避免了布局對象之間發(fā)生重疊的情況，有效地對布局對象進(jìn)行重疊處理，提高了對網(wǎng)頁進(jìn)行布局的空間利用率。