[發(fā)明專利]一種確定柵格系統(tǒng)的方法及裝置

在審

• 申請?zhí)枺?/td>: 201310676917.9
• 申請日: 2013-12-11
• 公開（公告）號: CN103677830A
• 公開（公告）日: 2014-03-26
• 發(fā)明（設(shè)計）人: 張晨;劉豆;李時斌;王宇;吳海波
• 申請（專利權(quán)）人: 樂視網(wǎng)信息技術(shù)（北京）股份有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 北京同達(dá)信恒知識產(chǎn)權(quán)代理有限公司 11291
• 代理人: 黃志華

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

本發(fā)明涉及網(wǎng)頁技術(shù)領(lǐng)域，尤其涉及一種確定柵格系統(tǒng)的方法及裝置。

背景技術(shù)

在網(wǎng)頁中采用柵格系統(tǒng)布局，具有風(fēng)格工整簡潔、條理清楚等優(yōu)點，故其成為如今網(wǎng)頁設(shè)計的主流風(fēng)格之一。

如圖1所示為柵格系統(tǒng)的構(gòu)成示意圖，由圖1可知，柵格系統(tǒng)中包括若干個以規(guī)則的陣列形式排列的柵格單元A，柵格單元A包括柵格元素a以及柵格元素a與柵格元素a之間的柵格間距i。柵格單元A以網(wǎng)格陣列形式排列，構(gòu)成柵格系統(tǒng)B。

一般的，進(jìn)行頁面布局時，采用如下方式進(jìn)行確定柵格系統(tǒng)的：使用固定尺寸大小的柵格元素a和柵格間距i，按照每個柵格單元的寬度，以整數(shù)倍的形式逐漸增加?xùn)鸥駟卧膫€數(shù)，直至適應(yīng)容器（采用柵格系統(tǒng)進(jìn)行布局的頁面或者區(qū)塊）的寬度W大小，最終得到柵格系統(tǒng)，并在容器中居中或者居于一邊呈現(xiàn)柵格系統(tǒng)，圖1所示為柵格系統(tǒng)在容器中居于一邊的呈現(xiàn)方式。

上述進(jìn)行柵格系統(tǒng)確定時，若容器的寬度不能滿足將整數(shù)個柵格單元進(jìn)行呈現(xiàn)時，則會使柵格系統(tǒng)的兩邊或者一邊出現(xiàn)較大空留區(qū)域，不能達(dá)到柵格系統(tǒng)寬度與容器寬度的適配，進(jìn)而影響柵格系統(tǒng)在容器中的呈現(xiàn)效果。

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

本發(fā)明的目的是提供一種確定柵格系統(tǒng)的方法及裝置，以實現(xiàn)柵格系統(tǒng)寬度與容器寬度的適配。

本發(fā)明的目的是通過以下技術(shù)方案實現(xiàn)的：

本發(fā)明一方面提供一種確定柵格系統(tǒng)的方法，包括：

確定欲采用柵格系統(tǒng)進(jìn)行布局的容器的容器寬度；

根據(jù)所述容器寬度以及預(yù)設(shè)的柵格單元寬度，確定容器中每行最多能夠呈現(xiàn)的柵格單元數(shù)量；

確定所述容器中每行呈現(xiàn)所述數(shù)量的柵格單元以后剩余的空留區(qū)域；

根據(jù)所述空留區(qū)域的寬度，調(diào)整所述預(yù)設(shè)的柵格單元的寬度，使得所述數(shù)量的調(diào)整后的柵格單元的總寬度與所述容器寬度之差為預(yù)設(shè)的寬度閾值。

本發(fā)明實施例中提供的確定柵格系統(tǒng)的方法，根據(jù)容器寬度與預(yù)設(shè)柵格單元的寬度，確定容器中每行最多能夠呈現(xiàn)的柵格單元數(shù)量，以及容器中每行呈現(xiàn)柵格單元以后剩余的空留區(qū)域，根據(jù)空留區(qū)域的寬度對預(yù)設(shè)的柵格單元寬度進(jìn)行調(diào)整，最終使得所述數(shù)量的調(diào)整后的柵格單元的總寬度與容器寬度之差為預(yù)設(shè)的寬度閾值，得到接近占滿容器的柵格系統(tǒng)，能夠?qū)崿F(xiàn)柵格系統(tǒng)的寬度與容器寬度的適配，提高柵格系統(tǒng)在容器中的呈現(xiàn)效果。

優(yōu)選的，所述根據(jù)所述容器寬度以及預(yù)設(shè)的柵格單元寬度，確定容器中每行最多能夠呈現(xiàn)的柵格單元數(shù)量，具體包括：

將所述容器寬度對應(yīng)的數(shù)值與所述柵格單元寬度對應(yīng)的數(shù)值做除法運(yùn)算，得到第一取值，其中，所述柵格單元的寬度為系統(tǒng)默認(rèn)值；

對所述第一取值向下取整，得到容器中每行最多能夠呈現(xiàn)的柵格單元數(shù)量。

本發(fā)明實施例中采用向下取整方式確定每行最多能夠呈現(xiàn)的柵格單元數(shù)量，能夠保證容器內(nèi)的柵格單元都為完成的柵格單元，提高柵格呈現(xiàn)效果。

優(yōu)選的，根據(jù)所述空留區(qū)域的寬度，調(diào)整所述預(yù)設(shè)的柵格單元的寬度，具體包括：

根據(jù)所述空留區(qū)域的寬度，通過調(diào)整所述預(yù)設(shè)的柵格單元中的柵格間距，調(diào)整所述預(yù)設(shè)的柵格單元的寬度。

本發(fā)明實施例中通過對柵格間距進(jìn)行調(diào)整，能夠保證柵格元素大小不變，提高柵格呈現(xiàn)效果。

進(jìn)一步優(yōu)選的，本發(fā)明實施例中所述根據(jù)所述空留區(qū)域的寬度，調(diào)整預(yù)設(shè)的柵格單元中的柵格間距，具體包括：

根據(jù)所述空留區(qū)域的寬度、每行呈現(xiàn)的柵格單元的數(shù)量以及預(yù)設(shè)的寬度閾值，確定每個柵格單元中的柵格間距需要調(diào)整的調(diào)整尺寸；

根據(jù)確定的所述調(diào)整尺寸，對每個柵格單元中的柵格間距進(jìn)行調(diào)整。

本發(fā)明上述進(jìn)行柵格間距的調(diào)整方式，能夠?qū)⑷萜骺樟魠^(qū)域的寬度近似平均的分配到每個柵格單元中的柵格間距上，保證在各個容器寬度下，柵格系統(tǒng)的寬度都能與其適配，并提高柵格呈現(xiàn)效果。

進(jìn)一步優(yōu)選的，所述預(yù)設(shè)的閾值為0時，確定每個柵格單元中的柵格間距需要調(diào)整的調(diào)整尺寸，具體包括：

按照公式得到i的整數(shù)值M和i的余數(shù)值N；

確定每行呈現(xiàn)的柵格單元中前N個柵格單元中的柵格間距的調(diào)整尺寸為M+1；

確定每行呈現(xiàn)的柵格單元中后n-N個柵格單元中的柵格間距的調(diào)整尺寸為M；

其中，i為調(diào)整尺寸，M為i的整數(shù)值，N為i的余數(shù)值，w為容器寬度，n為每行呈現(xiàn)的柵格單元個數(shù)，A為預(yù)設(shè)的柵格單元寬度，x為預(yù)設(shè)的柵格單元中柵格間距所占寬度。