[發明專利]一種網頁布局方法、裝置、電子設備及存儲介質

有效

• 申請號: 202011305090.7
• 申請日: 2020-11-19
• 公開（公告）號: CN112287264B
• 公開（公告）日: 2022-08-12
• 發明（設計）人: 劉凱
• 申請（專利權）人: 邁普通信技術股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 北京超凡宏宇專利代理事務所(特殊普通合伙) 11463
• 代理人: 衡滔

本申請提供一種網頁布局方法、裝置、電子設備及存儲介質，該方法包括：獲得網頁中的多個布局對象；分別計算出多個布局對象的每個布局對象的最大邊長值；按照最大邊長值從大到小的順序對多個布局對象進行排序，獲得排序后的多個布局對象；依次對排序后的多個布局對象的每個布局對象進行重疊判定和重疊處理，以實現網頁布局。在上述的實現過程中，通過根據多個布局對象的每個布局對象的最大邊長值對多個布局對象進行排序，有效地利用了遞進式的排列信息，使用遞進式的排列方式來避免容易存在空白位置的問題，提高了對網頁進行布局的空間利用率，從而實現了高利用率的網頁自動布局。

技術領域

本申請涉及前端開發和網頁布局的技術領域，具體而言，涉及一種網頁布局方法、裝置、電子設備及存儲介質。

背景技術

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

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

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

發明內容

本申請實施例的目的在于提供一種網頁布局方法、裝置、電子設備及存儲介質，用于改善對網頁進行布局的空間利用率較低的問題。

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

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