本發(fā)明涉及網(wǎng)絡(luò)通信技術(shù)領(lǐng)域，具體涉及一種多欄網(wǎng)頁(yè)的布局方法及裝置。

背景技術(shù)：

隨著互聯(lián)網(wǎng)的應(yīng)用和普及，互聯(lián)網(wǎng)已經(jīng)成為人們?nèi)粘Ｉ钪幸粋€(gè)重要工具，人們甚至每天都需要瀏覽互聯(lián)網(wǎng)中的網(wǎng)頁(yè)，以獲取自己所需要的信息。由于一個(gè)網(wǎng)頁(yè)中往往會(huì)包含大量不同類(lèi)型的信息，因此，多欄網(wǎng)頁(yè)得到了越多越多的應(yīng)用。在多欄網(wǎng)頁(yè)中，整個(gè)網(wǎng)頁(yè)的頁(yè)面內(nèi)容被劃分為多個(gè)欄，每個(gè)欄中所顯示的內(nèi)容可以根據(jù)實(shí)際需要而動(dòng)態(tài)調(diào)整。

在實(shí)現(xiàn)本申請(qǐng)實(shí)施例的過(guò)程中，發(fā)明人發(fā)現(xiàn)現(xiàn)有技術(shù)中至少存在如下問(wèn)題：由于各個(gè)欄中所顯示的內(nèi)容可以根據(jù)實(shí)際需求而動(dòng)態(tài)調(diào)整，因此，當(dāng)某一欄由于調(diào)整而導(dǎo)致內(nèi)容增多時(shí)，將會(huì)導(dǎo)致該欄的長(zhǎng)度變長(zhǎng)；而某一欄由于調(diào)整而導(dǎo)致內(nèi)容減少時(shí)，將會(huì)導(dǎo)致該欄的長(zhǎng)度變短。相應(yīng)地，由于各個(gè)欄的高度不同，導(dǎo)致各個(gè)欄的底部參差不齊，且有些欄的底部會(huì)出現(xiàn)大量的空白區(qū)域。由此可見(jiàn)，現(xiàn)有的多欄網(wǎng)頁(yè)的布局方式不僅無(wú)法有效利用網(wǎng)頁(yè)的頁(yè)面空間，還導(dǎo)致網(wǎng)頁(yè)的頁(yè)面布局不夠美觀，影響網(wǎng)頁(yè)頁(yè)面的視覺(jué)效果。

技術(shù)實(shí)現(xiàn)要素：

鑒于上述問(wèn)題，提出了本發(fā)明以便提供一種克服上述問(wèn)題或者至少部分地解決上述問(wèn)題的多欄網(wǎng)頁(yè)的布局方法及裝置。

依據(jù)本發(fā)明的一個(gè)方面，提供了一種多欄網(wǎng)頁(yè)的布局方法，包括：設(shè)置用于存儲(chǔ)所述多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器；在所述父容器內(nèi)設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，將所述父容器的高度定義為各個(gè)子容器對(duì)應(yīng)的最大高度；在所述父容器內(nèi)設(shè)置填補(bǔ)元素，通過(guò)絕對(duì)定位將所述填補(bǔ)元素固定在所述父容器的底部；設(shè)置所述填補(bǔ)元素的層級(jí)，使所述填補(bǔ)元素的層級(jí)低于所述欄目數(shù)據(jù)元素的層級(jí)。

可選地，所述在所述父容器內(nèi)設(shè)置填補(bǔ)元素的步驟具體包括：在所述父容器內(nèi)根據(jù)各個(gè)欄的欄目數(shù)據(jù)元素的元素類(lèi)型設(shè)置多個(gè)分別與各個(gè)欄的欄目數(shù)據(jù)元素相對(duì)應(yīng)的填補(bǔ)元素；其中，各個(gè)欄的欄目數(shù)據(jù)元素的元素類(lèi)型包括：圖片類(lèi)型和/或文本類(lèi)型，且所述填補(bǔ)元素包括：圖片類(lèi)型的填補(bǔ)元素、和/或文本類(lèi)型的填補(bǔ)元素。

可選地，所述通過(guò)絕對(duì)定位將所述填補(bǔ)元素固定在所述父容器的底部的步驟進(jìn)一步包括：確定各個(gè)欄的欄目數(shù)據(jù)元素在水平方向上對(duì)應(yīng)的坐標(biāo)范圍，分別將各個(gè)填補(bǔ)元素固定在與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素對(duì)應(yīng)的坐標(biāo)范圍內(nèi)。

可選地，根據(jù)上述任一所述方法，其中，各個(gè)子容器的高度等于相應(yīng)的子容器內(nèi)存儲(chǔ)的欄目數(shù)據(jù)元素的高度，且各個(gè)子容器的頂部與所述父容器的頂部對(duì)齊。

可選地，所述各個(gè)子容器的高度根據(jù)存儲(chǔ)的欄目數(shù)據(jù)元素的高度變化進(jìn)行自適應(yīng)調(diào)整；其中，當(dāng)各個(gè)子容器的高度相同時(shí)，所述父容器內(nèi)的填補(bǔ)元素處于不可見(jiàn)狀態(tài)；當(dāng)各個(gè)子容器的高度不同時(shí)，高度小于父容器高度的子容器中存儲(chǔ)的欄目數(shù)據(jù)元素所對(duì)應(yīng)的填補(bǔ)元素處于可見(jiàn)狀態(tài)。

依據(jù)本發(fā)明的另一方面，提供了一種多欄網(wǎng)頁(yè)的布局裝置，包括：父容器設(shè)置模塊，適于設(shè)置用于存儲(chǔ)所述多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器；子容器設(shè)置模塊，適于在所述父容器內(nèi)設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，且所述父容器設(shè)置模塊進(jìn)一步用于將所述父容器的高度定義為各個(gè)子容器對(duì)應(yīng)的最大高度；填補(bǔ)元素設(shè)置模塊，適于在所述父容器內(nèi)設(shè)置填補(bǔ)元素，通過(guò)絕對(duì)定位將所述填補(bǔ)元素固定在所述父容器的底部；層級(jí)設(shè)置模塊，適于設(shè)置所述填補(bǔ)元素的層級(jí)，使所述填補(bǔ)元素的層級(jí)低于所述欄目數(shù)據(jù)元素的層級(jí)。

可選地，所述填補(bǔ)元素設(shè)置模塊具體用于在所述父容器內(nèi)根據(jù)各個(gè)欄的欄目數(shù)據(jù)元素的元素類(lèi)型設(shè)置多個(gè)分別與各個(gè)欄的欄目數(shù)據(jù)元素相對(duì)應(yīng)的填補(bǔ)元素；其中，各個(gè)欄的欄目數(shù)據(jù)元素的元素類(lèi)型包括：圖片類(lèi)型和/或文本類(lèi)型，且所述填補(bǔ)元素包括：圖片類(lèi)型的填補(bǔ)元素、和/或文本類(lèi)型的填補(bǔ)元素。

可選地，所述填補(bǔ)元素設(shè)置模塊進(jìn)一步包括：設(shè)置單元，適于設(shè)置父容器內(nèi)填補(bǔ)元素的元素類(lèi)型；固定單元，適于通過(guò)絕對(duì)定位將所述填補(bǔ)元素固定在所述父容器的底部，并進(jìn)一步確定各個(gè)欄的欄目數(shù)據(jù)元素在水平方向上對(duì)應(yīng)的坐標(biāo)范圍，分別將各個(gè)填補(bǔ)元素固定在與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素對(duì)應(yīng)的坐標(biāo)范圍內(nèi)。

可選地，根據(jù)上述任一所述的裝置，其中，各個(gè)子容器的高度等于相應(yīng)的子容器內(nèi)存儲(chǔ)的欄目數(shù)據(jù)元素的高度，且各個(gè)子容器的頂部與所述父容器的頂部對(duì)齊。

可選地，所述各個(gè)子容器的高度根據(jù)存儲(chǔ)的欄目數(shù)據(jù)元素的高度變化進(jìn)行自適應(yīng)調(diào)整；其中，當(dāng)各個(gè)子容器的高度相同時(shí)，所述父容器內(nèi)的填補(bǔ)元素處于不可見(jiàn)狀態(tài)；當(dāng)各個(gè)子容器的高度不同時(shí)，高度小于父容器高度的子容器中存儲(chǔ)的欄目數(shù)據(jù)元素所對(duì)應(yīng)的填補(bǔ)元素處于可見(jiàn)狀態(tài)。

在本發(fā)明提供的多欄網(wǎng)頁(yè)的布局方法及裝置中，首先通過(guò)設(shè)置一個(gè)能夠存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器，然后在父容器中設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，并將父容器的高度定義為上述多個(gè)子容器中所對(duì)應(yīng)的最大高度，最后在父容器中設(shè)置固定于父容器底部的填補(bǔ)元素，并將父容器中的填補(bǔ)元素設(shè)置為低于欄目數(shù)據(jù)的層級(jí)，以實(shí)現(xiàn)利用父容器中的填補(bǔ)元素來(lái)填補(bǔ)網(wǎng)頁(yè)頁(yè)面中的空白區(qū)域的效果。由此可見(jiàn)，本申請(qǐng)實(shí)施例中的方案解決了在對(duì)網(wǎng)頁(yè)頁(yè)面的內(nèi)容進(jìn)行增加或刪減操作時(shí)，網(wǎng)頁(yè)頁(yè)面中的多個(gè)欄目由于無(wú)法自動(dòng)對(duì)齊進(jìn)而影響網(wǎng)頁(yè)的美觀性的問(wèn)題，使網(wǎng)頁(yè)的頁(yè)面空間能夠得到更有效的利用，并提升了網(wǎng)頁(yè)布局的美觀性。

上述說(shuō)明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說(shuō)明書(shū)的內(nèi)容予以實(shí)施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點(diǎn)能夠更明顯易懂，以下特舉本發(fā)明的具體實(shí)施方式。

附圖說(shuō)明

通過(guò)閱讀下文優(yōu)選實(shí)施方式的詳細(xì)描述，各種其他的優(yōu)點(diǎn)和益處對(duì)于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實(shí)施方式的目的，而并不認(rèn)為是對(duì)本發(fā)明的限制。而且在整個(gè)附圖中，用相同的參考符號(hào)表示相同的部件。在附圖中：

圖1示出了本發(fā)明一個(gè)實(shí)施例提供的多欄網(wǎng)頁(yè)的布局方法的流程圖；

圖2示出了本發(fā)明另一個(gè)具體實(shí)施例提供的多欄網(wǎng)頁(yè)的布局方法的流程圖；

圖3a為本發(fā)明另一個(gè)具體實(shí)施例中填補(bǔ)元素填補(bǔ)效果顯示示意圖；

圖3b為本發(fā)明另一個(gè)具體實(shí)施例中填補(bǔ)元素層級(jí)顯示示意圖；

圖4示出了本發(fā)明再一實(shí)施例提供的一種多欄網(wǎng)頁(yè)的布局裝置的結(jié)構(gòu)框圖；

圖5示出了本發(fā)明再一具體實(shí)施例提供的一種多欄網(wǎng)頁(yè)的布局裝置的結(jié)構(gòu)框圖。

具體實(shí)施方式

下面將參照附圖更詳細(xì)地描述本公開(kāi)的示例性實(shí)施例。雖然附圖中顯示了本公開(kāi)的示例性實(shí)施例，然而應(yīng)當(dāng)理解，可以以各種形式實(shí)現(xiàn)本公開(kāi)而不應(yīng)被這里闡述的實(shí)施例所限制。相反，提供這些實(shí)施例是為了能夠更透徹地理解本公開(kāi)，并且能夠?qū)⒈竟_(kāi)的范圍完整的傳達(dá)給本領(lǐng)域的技術(shù)人員。

本發(fā)明實(shí)施例提供了一種多欄網(wǎng)頁(yè)的布局方法及裝置，至少能夠解決現(xiàn)有技術(shù)中在對(duì)多欄網(wǎng)頁(yè)頁(yè)面的內(nèi)容進(jìn)行增加或刪減操作時(shí)，無(wú)法因?yàn)榫W(wǎng)頁(yè)中欄目?jī)?nèi)容的改變而適應(yīng)性調(diào)整網(wǎng)頁(yè)頁(yè)面布局，進(jìn)而影響網(wǎng)頁(yè)頁(yè)面布局的美觀性的技術(shù)問(wèn)題。

圖1示出了本發(fā)明一個(gè)實(shí)施例提供的多欄網(wǎng)頁(yè)的布局方法的流程圖。如圖1所示，該方法包括以下步驟：

步驟S110：設(shè)置用于存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。

具體地，多欄網(wǎng)頁(yè)具體為具有多個(gè)不同信息欄的網(wǎng)頁(yè)，多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容具體為上述多個(gè)信息欄中所包含的內(nèi)容。例如導(dǎo)航網(wǎng)頁(yè)中包含有“游戲”、“影視”、“購(gòu)物”等多個(gè)不同的信息欄，則導(dǎo)航網(wǎng)頁(yè)是一個(gè)多欄網(wǎng)頁(yè)，“游戲”、“影視”、“購(gòu)物”等多個(gè)信息欄中所包含的內(nèi)容為導(dǎo)航網(wǎng)頁(yè)對(duì)應(yīng)信息欄中的網(wǎng)頁(yè)內(nèi)容。在設(shè)置用于存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器時(shí)，具體為定義一個(gè)能夠存儲(chǔ)上述多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的空容器，將該空容器作為存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。

步驟S120：在父容器內(nèi)設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，將父容器的高度定義為各個(gè)子容器對(duì)應(yīng)的最大高度。

具體地，在設(shè)置父容器之后，在父容器中進(jìn)一步定義多個(gè)子容器，并進(jìn)一步定義上述多個(gè)子容器的高度、位置等相關(guān)參數(shù)。其中，上述多個(gè)子容器分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素。在完成父容器與子容器的設(shè)置之后，進(jìn)一步對(duì)包含多個(gè)子容器的父容器的高度進(jìn)行定義，因?yàn)楦溉萜饕菁{多個(gè)子容器，因此定義父容器的高度具體為父容器中所包含的多個(gè)子容器所對(duì)應(yīng)的最大高度，以實(shí)現(xiàn)當(dāng)父容器中的多個(gè)子容器所對(duì)應(yīng)的最大高度值改變時(shí)，父容器的高度也隨之改變的效果。

步驟S130：在父容器內(nèi)設(shè)置填補(bǔ)元素，通過(guò)絕對(duì)定位將填補(bǔ)元素固定在父容器的底部。

具體地，在父容器內(nèi)設(shè)置填補(bǔ)元素時(shí)，可以根據(jù)父容器中子容器所存儲(chǔ)的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素類(lèi)型來(lái)設(shè)置填補(bǔ)元素。例如，若父容器中子容器1所存儲(chǔ)的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素類(lèi)型為圖片類(lèi)型，則將父容器中與子容器1對(duì)應(yīng)部分的填補(bǔ)元素設(shè)置為圖片類(lèi)型的填補(bǔ)元素；若父容器中子容器1所存儲(chǔ)的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素類(lèi)型為文字類(lèi)型，則將父容器中與子容器1對(duì)應(yīng)部分的填補(bǔ)元素設(shè)置為文字類(lèi)型的填補(bǔ)元素。在完成上述步驟之后，通過(guò)絕對(duì)定位的方法將上述所設(shè)置的填補(bǔ)元素固定在父容器的底部，以供后續(xù)步驟(對(duì)應(yīng)步驟S140)中能夠?qū)⑺O(shè)置的填補(bǔ)元素顯示出來(lái)。

步驟S140：設(shè)置填補(bǔ)元素的層級(jí)，使填補(bǔ)元素的層級(jí)低于欄目數(shù)據(jù)元素的層級(jí)。

具體地，一個(gè)數(shù)據(jù)元素只對(duì)應(yīng)有一個(gè)層級(jí)，當(dāng)兩個(gè)數(shù)據(jù)元素的位置相互重疊時(shí)，層級(jí)低的數(shù)據(jù)元素會(huì)被層級(jí)高的數(shù)據(jù)元素覆蓋，即只顯示層級(jí)高的數(shù)據(jù)元素對(duì)應(yīng)的內(nèi)容而不顯示層級(jí)低的數(shù)據(jù)元素對(duì)應(yīng)的內(nèi)容。因此在設(shè)置完填補(bǔ)元素之后，為了使填補(bǔ)元素僅在網(wǎng)頁(yè)頁(yè)面的各個(gè)信息欄即將出現(xiàn)空白時(shí)顯示出來(lái)，則需要進(jìn)一步設(shè)置填補(bǔ)元素的層級(jí)，將上述填補(bǔ)元素的層級(jí)設(shè)置為低于各個(gè)信息欄的欄目數(shù)據(jù)元素的層級(jí)，以實(shí)現(xiàn)當(dāng)網(wǎng)頁(yè)頁(yè)面中的信息欄內(nèi)顯示的欄目數(shù)據(jù)元素能夠填滿(mǎn)網(wǎng)頁(yè)頁(yè)面時(shí)，填補(bǔ)元素位于所顯示的信息欄的欄目數(shù)據(jù)元素之下，為隱藏狀態(tài)；當(dāng)網(wǎng)頁(yè)頁(yè)面中的信息欄內(nèi)顯示的欄目數(shù)據(jù)元素不能填滿(mǎn)網(wǎng)頁(yè)頁(yè)面時(shí)，低層級(jí)的填補(bǔ)元素會(huì)對(duì)應(yīng)顯示出來(lái)并對(duì)應(yīng)補(bǔ)全網(wǎng)頁(yè)中的空白，進(jìn)而使網(wǎng)頁(yè)的布局更加完整，網(wǎng)頁(yè)頁(yè)面更加美觀。

由此可見(jiàn)，在本發(fā)明提供的多欄網(wǎng)頁(yè)的布局方法中，首先通過(guò)設(shè)置一個(gè)能夠存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器，然后在父容器中設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，并將父容器的高度定義為上述多個(gè)子容器所對(duì)應(yīng)的最大高度，最后在父容器中設(shè)置固定于父容器底部的填補(bǔ)元素，并將父容器中的填補(bǔ)元素設(shè)置為低于欄目數(shù)據(jù)的層級(jí)。在本申請(qǐng)實(shí)施例的方案中，由于父容器的高度等于高度最大的子容器的高度，因此，除高度最大的子容器之外，其他的子容器由于高度較小而致使下方的內(nèi)容出現(xiàn)空白(各個(gè)子容器默認(rèn)與父容器的頂部對(duì)齊)，而填補(bǔ)元素通過(guò)絕對(duì)定位固定在父容器的底部且層級(jí)低于子容器內(nèi)顯示的欄目數(shù)據(jù)元素的層級(jí)，因此，一旦其他子容器由于高度較小而致使其中的欄目數(shù)據(jù)元素下方出現(xiàn)空白時(shí)，在這些高度較小的子容器所對(duì)應(yīng)的位置處設(shè)置的層級(jí)較低的填補(bǔ)元素將顯露出來(lái)，從而實(shí)現(xiàn)自動(dòng)填補(bǔ)空白，提高美觀性的效果。

圖2示出了本發(fā)明另一個(gè)具體實(shí)施例提供的多欄網(wǎng)頁(yè)的布局方法的流程圖。如圖2所示，該方法包括以下步驟：

步驟S210：設(shè)置用于存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。

具體地，多欄網(wǎng)頁(yè)為具有多個(gè)不同信息欄的網(wǎng)頁(yè)，多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容包括上述多個(gè)信息欄中所包含的內(nèi)容。例如導(dǎo)航網(wǎng)頁(yè)中具有“游戲”、“影視”、“購(gòu)物”等多個(gè)不同的信息欄，則導(dǎo)航網(wǎng)頁(yè)是一個(gè)多欄網(wǎng)頁(yè)，“游戲”、“影視”、“購(gòu)物”等多個(gè)信息欄中所包含的內(nèi)容為導(dǎo)航網(wǎng)頁(yè)對(duì)應(yīng)信息欄中的網(wǎng)頁(yè)內(nèi)容。在設(shè)置用于存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器時(shí)，具體為首先定義一個(gè)空容器，將該空容器作為存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。其中，上述空容器能夠存儲(chǔ)上述多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容，并且在該空容器中，還能夠進(jìn)一步定義多個(gè)空的子容器，以實(shí)現(xiàn)對(duì)每一欄的網(wǎng)頁(yè)內(nèi)容的對(duì)應(yīng)存儲(chǔ)。具體實(shí)施中，上述父容器具體可以通過(guò)<div>(在HTML中可以把文檔分割為獨(dú)立的、不同的部分)代碼實(shí)現(xiàn)。

步驟S220：在父容器內(nèi)設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，將父容器的高度定義為各個(gè)子容器對(duì)應(yīng)的最大高度。

具體地，與設(shè)置父容器相類(lèi)似地，在設(shè)置子容器時(shí)，首先在父容器中定義多個(gè)空容器，然后將上述定義的多個(gè)空容器作為上述父容器中的多個(gè)子容器，其中，上述多個(gè)子容器用于存儲(chǔ)網(wǎng)頁(yè)中對(duì)應(yīng)欄的欄目數(shù)據(jù)元素，同時(shí)，在設(shè)置完用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器之后，進(jìn)一步對(duì)子容器的高度、位置的相關(guān)參數(shù)進(jìn)行設(shè)置：針對(duì)于每個(gè)子容器的高度，設(shè)置子容器的高度為該子容器內(nèi)存儲(chǔ)的欄目數(shù)據(jù)元素的高度，即每一行的欄目數(shù)據(jù)元素都有一個(gè)對(duì)應(yīng)的高度，在設(shè)置子容器的高度時(shí)，具體為將每個(gè)子容器的高度設(shè)置為該子容器中所包含的各行欄目數(shù)據(jù)元素的高度之和；針對(duì)于每個(gè)子容器的位置，設(shè)置每個(gè)子容器的頂部與包含該子容器的父容器的頂部對(duì)齊，即從視覺(jué)效果上看，每個(gè)子容器都是掛在父容器的最上方(在不采取絕對(duì)定位技術(shù)的前提下，每個(gè)子容器的頂部均默認(rèn)與父容器的頂部對(duì)齊)。在完成上述設(shè)置之后，進(jìn)一步對(duì)包含該子容器的父容器的高度進(jìn)行定義，具體地，將父容器的高度定義為父容器中所包含的各個(gè)子容器的高度中所對(duì)應(yīng)的最大高度，即父容器中包含的各個(gè)子容器的高度值的最大值。例如，若父容器中包含有子容器1、子容器2以及子容器3一共3個(gè)子容器，并且這3個(gè)子容器對(duì)應(yīng)的高度分別為10、20、30，則父容器的高度便對(duì)應(yīng)為上述高度值中的最大高度值30。

步驟S230：在父容器內(nèi)根據(jù)各個(gè)欄的欄目數(shù)據(jù)元素的元素類(lèi)型設(shè)置多個(gè)分別與各個(gè)欄的欄目數(shù)據(jù)元素相對(duì)應(yīng)的填補(bǔ)元素。

具體地，各個(gè)欄的欄目數(shù)據(jù)元素的元素類(lèi)型包括：圖片類(lèi)型和/或文本類(lèi)型；則對(duì)應(yīng)于上述欄目數(shù)據(jù)元素的元素類(lèi)型，填補(bǔ)元素的類(lèi)型包括：圖片類(lèi)型的填補(bǔ)元素、和/或文本類(lèi)型的填補(bǔ)元素。在設(shè)置父容器內(nèi)的填補(bǔ)元素時(shí)，具體為根據(jù)父容器中每個(gè)子容器所存儲(chǔ)的欄目數(shù)據(jù)元素的元素類(lèi)型來(lái)設(shè)置與其對(duì)應(yīng)的填補(bǔ)元素的類(lèi)型。例如，父容器中包含了2個(gè)子容器，分別位于父容器的左邊和右邊，以下對(duì)應(yīng)簡(jiǎn)稱(chēng)為左欄和右欄。其中，左欄包含的欄目數(shù)據(jù)元素的元素類(lèi)型為文本類(lèi)型，右欄包含的欄目數(shù)據(jù)元素的元素類(lèi)型為圖片類(lèi)型，則在設(shè)置父容器的填補(bǔ)元素時(shí)，將父容器中對(duì)應(yīng)于左欄區(qū)域的填補(bǔ)元素設(shè)置為文本類(lèi)型的填補(bǔ)元素，將父容器中對(duì)應(yīng)于右欄區(qū)域的填補(bǔ)元素設(shè)置為圖片類(lèi)型的填補(bǔ)元素。并且，在設(shè)置完填補(bǔ)元素的類(lèi)型之后，還可以進(jìn)一步根據(jù)子容器中欄目數(shù)據(jù)元素的具體內(nèi)容來(lái)進(jìn)一步設(shè)置父容器中的填補(bǔ)元素的內(nèi)容，例如，若上述左欄的欄目數(shù)據(jù)為文本類(lèi)型，具體內(nèi)容為新聞報(bào)道，則可以對(duì)應(yīng)將父容器中的填補(bǔ)元素也設(shè)置為新聞報(bào)道等。

步驟S240：通過(guò)絕對(duì)定位將填補(bǔ)元素固定在父容器的底部。

具體地，在設(shè)置完填補(bǔ)元素的元素類(lèi)型之后，進(jìn)一步通過(guò)絕對(duì)定位的方法將所設(shè)置的填補(bǔ)元素固定在父容器的底部。具體實(shí)施中，通過(guò)絕對(duì)定位將填補(bǔ)元素與父容器底部之間的距離長(zhǎng)度設(shè)為0，使填補(bǔ)元素的底部與父容器的底部對(duì)齊，以供在后續(xù)步驟(對(duì)應(yīng)步驟S250)中能夠?qū)⑺O(shè)置的填補(bǔ)元素顯示出來(lái)。

另外，當(dāng)填補(bǔ)元素包括分別與各個(gè)欄相對(duì)應(yīng)的、多種類(lèi)型的填補(bǔ)元素時(shí)，在本步驟中還需要進(jìn)一步確定各個(gè)欄的欄目數(shù)據(jù)元素在水平方向上對(duì)應(yīng)的坐標(biāo)范圍，分別將各個(gè)填補(bǔ)元素固定在與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素對(duì)應(yīng)的坐標(biāo)范圍內(nèi)。具體地，在將填補(bǔ)元素固定在父容器的底部之后，還要進(jìn)一步設(shè)置填補(bǔ)元素在水平方向上的坐標(biāo)范圍，以實(shí)現(xiàn)在水平坐標(biāo)上填補(bǔ)元素與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的重疊。具體實(shí)施中，可以設(shè)置一個(gè)獲取函數(shù)，該函數(shù)用于確定并獲取各個(gè)欄的欄目數(shù)據(jù)元素在水平方向上對(duì)應(yīng)的坐標(biāo)范圍，然后根據(jù)上述結(jié)果對(duì)應(yīng)確定與各個(gè)欄的欄目數(shù)據(jù)元素對(duì)應(yīng)的各個(gè)填補(bǔ)元素在水平方向上的坐標(biāo)范圍，最后可以通過(guò)絕對(duì)定位的方法將各個(gè)填補(bǔ)元素固定在上述所確定的坐標(biāo)范圍內(nèi)，以實(shí)現(xiàn)在水平坐標(biāo)范圍上設(shè)置填補(bǔ)元素與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素重疊的效果。

步驟S250：設(shè)置填補(bǔ)元素的層級(jí)，使填補(bǔ)元素的層級(jí)低于欄目數(shù)據(jù)元素的層級(jí)。

具體地，每個(gè)數(shù)據(jù)元素都有且只對(duì)應(yīng)有一個(gè)層級(jí)，當(dāng)兩個(gè)數(shù)據(jù)元素的位置相互重疊時(shí)，層級(jí)高的數(shù)據(jù)元素會(huì)覆蓋在層級(jí)低的數(shù)據(jù)元素之上，即在顯示效果上遮蓋住層級(jí)低的數(shù)據(jù)元素進(jìn)而只顯示層級(jí)高的數(shù)據(jù)元素；當(dāng)層級(jí)低的數(shù)據(jù)元素之上沒(méi)有層級(jí)更高的數(shù)據(jù)元素覆蓋(或?qū)蛹?jí)更高的數(shù)據(jù)元素為透明)時(shí)，層級(jí)低的數(shù)據(jù)元素會(huì)對(duì)應(yīng)顯示出來(lái)。因此，在完成步驟S240中的設(shè)置之后，進(jìn)一步對(duì)父容器中的填補(bǔ)元素的層級(jí)進(jìn)行設(shè)置，將填補(bǔ)元素的層級(jí)設(shè)置為低于該填補(bǔ)元素的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的層級(jí)，以實(shí)現(xiàn)當(dāng)父容器中的一個(gè)或多個(gè)子容器的底部均與該父容器的底部對(duì)齊時(shí)，設(shè)置在父容器中該對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的填補(bǔ)元素被覆蓋，網(wǎng)頁(yè)頁(yè)面中只顯示父容器中對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的內(nèi)容；當(dāng)父容器中的一個(gè)或多個(gè)子容器的底部沒(méi)有與該父容器的底部對(duì)齊時(shí)，即網(wǎng)頁(yè)頁(yè)面中出現(xiàn)空白時(shí)，設(shè)置在父容器中該對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的填補(bǔ)元素會(huì)對(duì)應(yīng)顯示出來(lái)，以實(shí)現(xiàn)以填補(bǔ)元素填補(bǔ)上述子容器底部與父容器底部之間的空白的效果，也就是說(shuō)，由于父容器的高度等于高度最大的子容器的高度，而各個(gè)子容器的高度能夠根據(jù)存儲(chǔ)的欄目數(shù)據(jù)元素的高度變化進(jìn)行自適應(yīng)調(diào)整，因此，當(dāng)各個(gè)子容器的高度相同時(shí)，父容器內(nèi)的填補(bǔ)元素處于不可見(jiàn)狀態(tài)；當(dāng)各個(gè)子容器的高度不同時(shí)，高度小于父容器高度的子容器中存儲(chǔ)的欄目數(shù)據(jù)元素所對(duì)應(yīng)的填補(bǔ)元素處于可見(jiàn)狀態(tài)。即：一旦其他子容器由于高度較小而致使其中的欄目數(shù)據(jù)元素下方出現(xiàn)空白時(shí)，在這些高度較小的子容器所對(duì)應(yīng)的位置處設(shè)置的層級(jí)較低的填補(bǔ)元素將顯露出來(lái)，從而實(shí)現(xiàn)自動(dòng)填補(bǔ)空白，提高網(wǎng)頁(yè)頁(yè)面布局的美觀性的效果。具體實(shí)施中，在設(shè)置填補(bǔ)元素的層級(jí)時(shí)，為了使填補(bǔ)元素位于所有數(shù)據(jù)元素的最下層，可以將填補(bǔ)元素CSS格式中的z-index的參數(shù)設(shè)置為-1。

舉例說(shuō)明，如圖3a所示，圖3a為填補(bǔ)元素填補(bǔ)效果顯示示意圖，子容器2底部與父容器底部沒(méi)有重合，對(duì)應(yīng)的填補(bǔ)元素(陰影部分)會(huì)顯示出來(lái)，進(jìn)而實(shí)現(xiàn)填補(bǔ)這部分(陰影部分區(qū)域)空白區(qū)域的效果，其中，填補(bǔ)元素的層級(jí)低于欄目數(shù)據(jù)的層級(jí)，因此圖中子容器1與子容器2的欄目數(shù)據(jù)元素均覆蓋了圖中的填補(bǔ)元素；再如圖3b所示，圖3b為圖3a中填補(bǔ)元素層級(jí)顯示示意圖，為了清楚起見(jiàn)，圖3b僅示出了填補(bǔ)元素，而未示出欄目數(shù)據(jù)元素，其中陰影部分均為填補(bǔ)元素，填補(bǔ)元素1所對(duì)應(yīng)位置(左邊一欄的位置)處的子容器1中的欄目數(shù)據(jù)的元素類(lèi)型為圖片類(lèi)型，填補(bǔ)元素2所對(duì)應(yīng)位置(右邊一欄的位置)處的子容器2中的欄目數(shù)據(jù)的元素類(lèi)型為文本類(lèi)型，無(wú)論是否存在欄目數(shù)據(jù)元素，填補(bǔ)元素都被固定在父容器的底部，其層級(jí)低于對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的層級(jí)，元素類(lèi)型與對(duì)應(yīng)子容器中欄目數(shù)據(jù)元素的元素類(lèi)型一致。

由此可見(jiàn)，在本發(fā)明提供的多欄網(wǎng)頁(yè)的布局方法中，首先通過(guò)設(shè)置一個(gè)能夠存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器，然后在父容器中設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，并將父容器的高度定義為上述多個(gè)子容器所對(duì)應(yīng)的最大高度，最后通過(guò)在父容器中設(shè)置填補(bǔ)元素，將填補(bǔ)元素的類(lèi)型設(shè)置為該填補(bǔ)元素對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的類(lèi)型，并通過(guò)絕對(duì)定位的方法將該填補(bǔ)元素固定在父容器的底部，并將該填補(bǔ)元素的層級(jí)設(shè)置為低于對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的層級(jí)。在本申請(qǐng)實(shí)施例的方案中，由于父容器的高度等于高度最大的子容器的高度，因此，除高度最大的子容器之外，其他的子容器由于高度較小而致使下方的內(nèi)容出現(xiàn)空白(各個(gè)子容器默認(rèn)與父容器的頂部對(duì)齊)，而填補(bǔ)元素通過(guò)絕對(duì)定位固定在父容器的底部且層級(jí)低于子容器內(nèi)顯示的欄目數(shù)據(jù)元素的層級(jí)，一旦其他子容器由于高度較小而致使其中的欄目數(shù)據(jù)元素下方出現(xiàn)空白時(shí)，在這些高度較小的子容器所對(duì)應(yīng)的位置處設(shè)置的層級(jí)較低的填補(bǔ)元素將顯露出來(lái)，從而實(shí)現(xiàn)自動(dòng)填補(bǔ)空白，提高網(wǎng)頁(yè)頁(yè)面布局的美觀性的效果。

圖4示出了本發(fā)明再一實(shí)施例提供的一種多欄網(wǎng)頁(yè)的布局裝置的結(jié)構(gòu)框圖。如圖4所示，該裝置包括：父容器設(shè)置模塊41、子容器設(shè)置模塊42、填補(bǔ)元素設(shè)置模塊43以及層級(jí)設(shè)置模塊44。

父容器設(shè)置模塊41適于設(shè)置用于存儲(chǔ)所述多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。

具體地，多欄網(wǎng)頁(yè)具體為具有多個(gè)不同信息欄的網(wǎng)頁(yè)，多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容具體為上述多個(gè)信息欄中所包含的內(nèi)容。例如導(dǎo)航網(wǎng)頁(yè)中包含有“游戲”、“影視”、“購(gòu)物”等多個(gè)不同的信息欄，則導(dǎo)航網(wǎng)頁(yè)是一個(gè)多欄網(wǎng)頁(yè)，“游戲”、“影視”、“購(gòu)物”等多個(gè)信息欄中所包含的內(nèi)容為導(dǎo)航網(wǎng)頁(yè)對(duì)應(yīng)信息欄中的網(wǎng)頁(yè)內(nèi)容。在設(shè)置用于存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器時(shí)，具體為父容器設(shè)置模塊41定義一個(gè)能夠存儲(chǔ)上述多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的空容器，將該空容器作為存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。并且，在子容器設(shè)置模塊42設(shè)置完子容器之后，父容器設(shè)置模塊41對(duì)上述所設(shè)置的父容器的高度進(jìn)行進(jìn)一步的定義，將上述所設(shè)置的父容器的高度定義為子容器設(shè)置模塊42所設(shè)置的各個(gè)子容器對(duì)應(yīng)的最大高度。

子容器設(shè)置模塊42適于在父容器內(nèi)設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器。

具體地，在設(shè)置父容器之后，子容器設(shè)置模塊42在父容器中進(jìn)一步定義多個(gè)子容器，并進(jìn)一步定義上述多個(gè)子容器的高度、位置等相關(guān)參數(shù)。其中，上述多個(gè)子容器分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素。在子容器設(shè)置模塊42完成子容器的設(shè)置之后，父容器設(shè)置模塊41進(jìn)一步從子容器設(shè)置模塊42中獲取所設(shè)置的多個(gè)子容器所對(duì)應(yīng)的最大高度，然后將上述所獲取的做大高度定義為父容器的最大高度。

填補(bǔ)元素設(shè)置模塊43適于在父容器內(nèi)設(shè)置填補(bǔ)元素，通過(guò)絕對(duì)定位將所述填補(bǔ)元素固定在父容器的底部。

具體地，填補(bǔ)元素設(shè)置模塊43可以根據(jù)父容器中子容器所存儲(chǔ)的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素類(lèi)型來(lái)設(shè)置填補(bǔ)元素。例如，若父容器中子容器1所存儲(chǔ)的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素類(lèi)型為圖片類(lèi)型，則將父容器中與子容器1對(duì)應(yīng)部分的填補(bǔ)元素設(shè)置為圖片類(lèi)型的填補(bǔ)元素；若父容器中子容器1所存儲(chǔ)的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素類(lèi)型為文字類(lèi)型，則將父容器中與子容器1對(duì)應(yīng)部分的填補(bǔ)元素設(shè)置為文字類(lèi)型的填補(bǔ)元素。在完成上述步驟之后，填補(bǔ)元素設(shè)置模塊33通過(guò)絕對(duì)定位的方法將上述所設(shè)置的填補(bǔ)元素固定在父容器的底部，以在通過(guò)后續(xù)模塊對(duì)填補(bǔ)元素進(jìn)行相關(guān)處理后(對(duì)應(yīng)層級(jí)設(shè)置模塊44)，能夠?qū)⑺O(shè)置的填補(bǔ)元素顯示出來(lái)。

層級(jí)設(shè)置模塊44適于設(shè)置填補(bǔ)元素的層級(jí)，使填補(bǔ)元素的層級(jí)低于欄目數(shù)據(jù)元素的層級(jí)。

具體地，一個(gè)數(shù)據(jù)元素只對(duì)應(yīng)有一個(gè)層級(jí)，當(dāng)兩個(gè)數(shù)據(jù)元素的位置相互重疊時(shí)，層級(jí)低的數(shù)據(jù)元素會(huì)被層級(jí)高的數(shù)據(jù)元素覆蓋，即只顯示層級(jí)高的數(shù)據(jù)元素對(duì)應(yīng)的內(nèi)容而不顯示層級(jí)低的數(shù)據(jù)元素對(duì)應(yīng)的內(nèi)容。因此在層級(jí)設(shè)置模塊44設(shè)置填補(bǔ)元素的層級(jí)時(shí)，將上述填補(bǔ)元素的層級(jí)設(shè)置為低于各個(gè)信息欄的欄目數(shù)據(jù)元素的層級(jí)，以實(shí)現(xiàn)當(dāng)網(wǎng)頁(yè)頁(yè)面中的信息欄內(nèi)顯示的欄目數(shù)據(jù)元素能夠填滿(mǎn)網(wǎng)頁(yè)頁(yè)面時(shí)，填補(bǔ)元素位于所顯示的信息欄的欄目數(shù)據(jù)元素之下，為隱藏狀態(tài)；當(dāng)網(wǎng)頁(yè)頁(yè)面中的信息欄內(nèi)顯示的欄目數(shù)據(jù)元素不能填滿(mǎn)網(wǎng)頁(yè)頁(yè)面時(shí)，低層級(jí)的填補(bǔ)元素會(huì)對(duì)應(yīng)顯示出來(lái)并對(duì)應(yīng)補(bǔ)全網(wǎng)頁(yè)中的空白，進(jìn)而使網(wǎng)頁(yè)的布局更加完整，網(wǎng)頁(yè)頁(yè)面更加美觀。

由此可見(jiàn)，在本發(fā)明提供的多欄網(wǎng)頁(yè)的布局裝置中，首先通過(guò)父容器設(shè)置模塊41設(shè)置一個(gè)能夠存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器，然后通過(guò)子容器模塊42在上述所設(shè)置的父容器中設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，并通過(guò)父容器設(shè)置模塊41進(jìn)一步將父容器的高度定義為上述多個(gè)子容器所對(duì)應(yīng)的最大高度，最后通過(guò)填補(bǔ)元素設(shè)置模塊43在父容器中設(shè)置固定于父容器底部的填補(bǔ)元素，并通過(guò)層級(jí)設(shè)置模塊44將父容器中的填補(bǔ)元素設(shè)置為低于欄目數(shù)據(jù)的層級(jí)。因此，本申請(qǐng)實(shí)施例中的方案能夠通過(guò)設(shè)置一個(gè)父容器并在父容器中設(shè)置多個(gè)子容器，然后通過(guò)在父容器中設(shè)置對(duì)應(yīng)的填補(bǔ)元素來(lái)實(shí)現(xiàn)多欄網(wǎng)頁(yè)的布局，并且，由于父容器的高度等于高度最大的子容器的高度，因此，除高度最大的子容器之外，其他的子容器由于高度較小而致使下方的內(nèi)容出現(xiàn)空白(各個(gè)子容器默認(rèn)與父容器的頂部對(duì)齊)，而填補(bǔ)元素通過(guò)絕對(duì)定位固定在父容器的底部且層級(jí)低于子容器內(nèi)顯示的欄目數(shù)據(jù)元素的層級(jí)，因此，一旦其他子容器由于高度較小而致使其中的欄目數(shù)據(jù)元素下方出現(xiàn)空白時(shí)，在這些高度較小的子容器所對(duì)應(yīng)的位置處設(shè)置的層級(jí)較低的填補(bǔ)元素將顯露出來(lái)，從而實(shí)現(xiàn)自動(dòng)填補(bǔ)空白，提高美觀性的效果

圖5示出了本發(fā)明再一具體實(shí)施例提供的一種多欄網(wǎng)頁(yè)的布局裝置的結(jié)構(gòu)框圖。如圖5所示，該裝置包括：父容器設(shè)置模塊51、子容器設(shè)置模塊52、填補(bǔ)元素設(shè)置模塊53以及層級(jí)設(shè)置模塊54。其中，填補(bǔ)元素設(shè)置模塊53進(jìn)一步包括設(shè)置單元531以及固定單元532。

父容器設(shè)置模塊51適于設(shè)置用于存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。

具體地，父容器設(shè)置模塊51在設(shè)置用于存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器時(shí)，具體為首先定義一個(gè)空容器，將該空容器作為存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器。其中，上述空容器能夠存儲(chǔ)上述多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容，并且在該空容器中，還能夠進(jìn)一步定義多個(gè)空的子容器，以實(shí)現(xiàn)對(duì)每一欄的網(wǎng)頁(yè)內(nèi)容的對(duì)應(yīng)存儲(chǔ)。具體實(shí)施中，父容器設(shè)置模塊51所設(shè)置的父容器具體可以通過(guò)<div>(在HTML中可以把文檔分割為獨(dú)立的、不同的部分)代碼實(shí)現(xiàn)。并且，在子容器設(shè)置模塊52設(shè)置完子容器之后，父容器設(shè)置模塊51對(duì)上述設(shè)置的父容器的高度進(jìn)行進(jìn)一步的定義，具體為將上述所設(shè)置的父容器的高度定義為子容器設(shè)置模塊52所設(shè)置的各個(gè)子容器對(duì)應(yīng)的最大高度。

子容器設(shè)置模塊52適于在父容器內(nèi)設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器。

具體地，與父容器設(shè)置模塊51設(shè)置父容器相類(lèi)似地，子容器設(shè)置模塊52在設(shè)置子容器時(shí)，首先在父容器中定義多個(gè)空容器，然后將上述定義的多個(gè)空容器作為上述父容器中的多個(gè)子容器，其中，上述多個(gè)子容器用于存儲(chǔ)網(wǎng)頁(yè)中對(duì)應(yīng)欄的欄目數(shù)據(jù)元素，同時(shí)，在設(shè)置完用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器之后，子容器設(shè)置模塊52進(jìn)一步對(duì)子容器的高度、位置的相關(guān)參數(shù)進(jìn)行設(shè)置：針對(duì)于每個(gè)子容器的高度，設(shè)置子容器的高度為該子容器內(nèi)存儲(chǔ)的欄目數(shù)據(jù)元素的高度，即每一行的欄目數(shù)據(jù)元素都有一個(gè)對(duì)應(yīng)的高度，在設(shè)置子容器的高度時(shí)，具體為將每個(gè)子容器的高度設(shè)置為該子容器中所包含的各行欄目數(shù)據(jù)元素的高度之和；針對(duì)于每個(gè)子容器的位置，設(shè)置每個(gè)子容器的頂部與包含該子容器的父容器的頂部對(duì)齊，即從視覺(jué)效果上看，每個(gè)子容器都是掛在父容器的最上方(在不采取絕對(duì)定位技術(shù)的前提下，每個(gè)子容器的頂部均默認(rèn)與父容器的頂部對(duì)齊)。

填補(bǔ)元素設(shè)置模塊53適于在父容器內(nèi)設(shè)置填補(bǔ)元素，通過(guò)絕對(duì)定位將所述填補(bǔ)元素固定在父容器的底部。其中，填補(bǔ)元素設(shè)置模塊53進(jìn)一步包括設(shè)置單元531以及固定單元532。

設(shè)置單元531適于設(shè)置父容器內(nèi)填補(bǔ)元素的元素類(lèi)型。

具體地，各個(gè)欄的欄目數(shù)據(jù)元素的元素類(lèi)型包括：圖片類(lèi)型和/或文本類(lèi)型；則對(duì)應(yīng)于上述欄目數(shù)據(jù)元素的元素類(lèi)型，填補(bǔ)元素的類(lèi)型包括：圖片類(lèi)型的填補(bǔ)元素、和/或文本類(lèi)型的填補(bǔ)元素。設(shè)置單元531在設(shè)置父容器內(nèi)的填補(bǔ)元素時(shí)，具體為根據(jù)父容器中每個(gè)子容器所存儲(chǔ)的欄目數(shù)據(jù)元素的元素類(lèi)型來(lái)設(shè)置與其對(duì)應(yīng)的填補(bǔ)元素的類(lèi)型。例如，父容器中包含了2個(gè)子容器，分別位于父容器的左邊和右邊，以下對(duì)應(yīng)簡(jiǎn)稱(chēng)為左欄和右欄。其中，左欄包含的欄目數(shù)據(jù)元素的元素類(lèi)型為文本類(lèi)型，右欄包含的欄目數(shù)據(jù)元素的元素類(lèi)型為圖片類(lèi)型，則設(shè)置單元531在設(shè)置父容器的填補(bǔ)元素時(shí)，將父容器中對(duì)應(yīng)于左欄區(qū)域的填補(bǔ)元素設(shè)置為文本類(lèi)型的填補(bǔ)元素，將父容器中對(duì)應(yīng)于右欄區(qū)域的填補(bǔ)元素設(shè)置為圖片類(lèi)型的填補(bǔ)元素。并且，設(shè)置單元531在設(shè)置完填補(bǔ)元素的類(lèi)型之后，還可以進(jìn)一步根據(jù)子容器中欄目數(shù)據(jù)元素的具體內(nèi)容來(lái)進(jìn)一步設(shè)置父容器中的填補(bǔ)元素的內(nèi)容，例如，若上述左欄的欄目數(shù)據(jù)為文本類(lèi)型，具體內(nèi)容為新聞報(bào)道，則可以對(duì)應(yīng)將父容器中的填補(bǔ)元素也設(shè)置為新聞報(bào)道等。

固定單元532適于通過(guò)絕對(duì)定位將所述填補(bǔ)元素固定在所述父容器的底部，并進(jìn)一步確定各個(gè)欄的欄目數(shù)據(jù)元素在水平方向上對(duì)應(yīng)的坐標(biāo)范圍，分別將各個(gè)填補(bǔ)元素固定在與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素對(duì)應(yīng)的坐標(biāo)范圍內(nèi)。

具體地，固定單元532通過(guò)絕對(duì)定位將填補(bǔ)元素與父容器底部之間的距離長(zhǎng)度設(shè)為0，使填補(bǔ)元素的底部與父容器的底部對(duì)齊，并且，當(dāng)填補(bǔ)元素包括分別與各個(gè)欄相對(duì)應(yīng)的、多種類(lèi)型的填補(bǔ)元素時(shí)，固定單元532還需要進(jìn)一步確定各個(gè)欄的欄目數(shù)據(jù)元素在水平方向上對(duì)應(yīng)的坐標(biāo)范圍，分別將各個(gè)填補(bǔ)元素固定在與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素對(duì)應(yīng)的坐標(biāo)范圍內(nèi)。具體地，固定單元532在將填補(bǔ)元素固定在父容器的底部之后，還要進(jìn)一步設(shè)置填補(bǔ)元素在水平方向上的坐標(biāo)范圍，以實(shí)現(xiàn)在水平坐標(biāo)上填補(bǔ)元素與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的重疊。具體實(shí)施中，可以設(shè)置一個(gè)獲取函數(shù)，該函數(shù)用于確定并獲取各個(gè)欄的欄目數(shù)據(jù)元素在水平方向上對(duì)應(yīng)的坐標(biāo)范圍，然后根據(jù)上述結(jié)果對(duì)應(yīng)確定與各個(gè)欄的欄目數(shù)據(jù)元素對(duì)應(yīng)的各個(gè)填補(bǔ)元素在水平方向上的坐標(biāo)范圍，最后可以通過(guò)絕對(duì)定位的方法將各個(gè)填補(bǔ)元素固定在上述所確定的坐標(biāo)范圍內(nèi)，以實(shí)現(xiàn)在水平坐標(biāo)范圍上設(shè)置填補(bǔ)元素與對(duì)應(yīng)欄的欄目數(shù)據(jù)元素重疊的效果。

層級(jí)設(shè)置模塊54適于設(shè)置填補(bǔ)元素的層級(jí)，使填補(bǔ)元素的層級(jí)低于欄目數(shù)據(jù)元素的層級(jí)。

具體地，層級(jí)設(shè)置模塊54在對(duì)父容器中的填補(bǔ)元素的層級(jí)進(jìn)行設(shè)置時(shí)，層級(jí)設(shè)置模塊54將父容器中填補(bǔ)元素的層級(jí)設(shè)置為低于該填補(bǔ)元素的對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的層級(jí)，由于父容器的高度等于高度最大的子容器的高度，而各個(gè)子容器的高度能夠根據(jù)存儲(chǔ)的欄目數(shù)據(jù)元素的高度變化進(jìn)行自適應(yīng)調(diào)整，因此，當(dāng)各個(gè)子容器的高度相同時(shí)，父容器內(nèi)的填補(bǔ)元素處于不可見(jiàn)狀態(tài)；當(dāng)各個(gè)子容器的高度不同時(shí)，高度小于父容器高度的子容器中存儲(chǔ)的欄目數(shù)據(jù)元素所對(duì)應(yīng)的填補(bǔ)元素處于可見(jiàn)狀態(tài)。也就是說(shuō)，一旦其他子容器由于高度較小而致使其中的欄目數(shù)據(jù)元素下方出現(xiàn)空白時(shí)，在這些高度較小的子容器所對(duì)應(yīng)的位置處設(shè)置的層級(jí)較低的填補(bǔ)元素將顯露出來(lái)，從而實(shí)現(xiàn)自動(dòng)填補(bǔ)空白，提高美觀性的效果。

上述各個(gè)模塊的具體結(jié)構(gòu)和工作原理可參照裝置實(shí)施例中相應(yīng)模塊的描述，此處不再贅述。

由此可見(jiàn)，在本發(fā)明提供的多欄網(wǎng)頁(yè)的布局裝置中，首先通過(guò)父容器設(shè)置模塊51設(shè)置一個(gè)能夠存儲(chǔ)多欄網(wǎng)頁(yè)的網(wǎng)頁(yè)內(nèi)容的父容器，然后通過(guò)子容器設(shè)置模塊52在父容器中設(shè)置多個(gè)分別用于存儲(chǔ)對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的子容器，并進(jìn)一步通過(guò)父容器設(shè)置模塊51將父容器的高度定義為上述多個(gè)子容器所對(duì)應(yīng)的最大高度，最后通過(guò)填補(bǔ)元素設(shè)置模塊53中的設(shè)置單元531設(shè)置父容器中填補(bǔ)元素的類(lèi)型，以及通過(guò)固定單元532使用絕對(duì)定位的方法將該填補(bǔ)元素固定在父容器的底部，最后通過(guò)層級(jí)設(shè)置模塊54將該填補(bǔ)元素的層級(jí)設(shè)置為低于對(duì)應(yīng)欄的欄目數(shù)據(jù)元素的層級(jí)。在本申請(qǐng)實(shí)施例的方案中，由于父容器的高度等于高度最大的子容器的高度，因此，除高度最大的子容器之外，其他的子容器由于高度較小而致使下方的內(nèi)容出現(xiàn)空白(各個(gè)子容器默認(rèn)與父容器的頂部對(duì)齊)，而填補(bǔ)元素通過(guò)絕對(duì)定位固定在父容器的底部且層級(jí)低于子容器內(nèi)顯示的欄目數(shù)據(jù)元素的層級(jí)，一旦其他子容器由于高度較小而致使其中的欄目數(shù)據(jù)元素下方出現(xiàn)空白時(shí)，在這些高度較小的子容器所對(duì)應(yīng)的位置處設(shè)置的層級(jí)較低的填補(bǔ)元素將顯露出來(lái)，從而實(shí)現(xiàn)自動(dòng)填補(bǔ)空白，提高網(wǎng)頁(yè)頁(yè)面布局的美觀性的效果。

在此提供的算法和顯示不與任何特定計(jì)算機(jī)、虛擬系統(tǒng)或者其它設(shè)備固有相關(guān)。各種通用系統(tǒng)也可以與基于在此的示教一起使用。根據(jù)上面的描述，構(gòu)造這類(lèi)系統(tǒng)所要求的結(jié)構(gòu)是顯而易見(jiàn)的。此外，本發(fā)明也不針對(duì)任何特定編程語(yǔ)言。應(yīng)當(dāng)明白，可以利用各種編程語(yǔ)言實(shí)現(xiàn)在此描述的本發(fā)明的內(nèi)容，并且上面對(duì)特定語(yǔ)言所做的描述是為了披露本發(fā)明的最佳實(shí)施方式。

在此處所提供的說(shuō)明書(shū)中，說(shuō)明了大量具體細(xì)節(jié)。然而，能夠理解，本發(fā)明的實(shí)施例可以在沒(méi)有這些具體細(xì)節(jié)的情況下實(shí)踐。在一些實(shí)例中，并未詳細(xì)示出公知的方法、結(jié)構(gòu)和技術(shù)，以便不模糊對(duì)本說(shuō)明書(shū)的理解。

類(lèi)似地，應(yīng)當(dāng)理解，為了精簡(jiǎn)本公開(kāi)并幫助理解各個(gè)發(fā)明方面中的一個(gè)或多個(gè)，在上面對(duì)本發(fā)明的示例性實(shí)施例的描述中，本發(fā)明的各個(gè)特征有時(shí)被一起分組到單個(gè)實(shí)施例、圖、或者對(duì)其的描述中。然而，并不應(yīng)將該公開(kāi)的方法解釋成反映如下意圖：即所要求保護(hù)的本發(fā)明要求比在每個(gè)權(quán)利要求中所明確記載的特征更多的特征。更確切地說(shuō)，如下面的權(quán)利要求書(shū)所反映的那樣，發(fā)明方面在于少于前面公開(kāi)的單個(gè)實(shí)施例的所有特征。因此，遵循具體實(shí)施方式的權(quán)利要求書(shū)由此明確地并入該具體實(shí)施方式，其中每個(gè)權(quán)利要求本身都作為本發(fā)明的單獨(dú)實(shí)施例。

本領(lǐng)域那些技術(shù)人員可以理解，可以對(duì)實(shí)施例中的設(shè)備中的模塊進(jìn)行自適應(yīng)性地改變并且把它們?cè)O(shè)置在與該實(shí)施例不同的一個(gè)或多個(gè)設(shè)備中?？梢园褜?shí)施例中的模塊或單元或組件組合成一個(gè)模塊或單元或組件，以及此外可以把它們分成多個(gè)子模塊或子單元或子組件。除了這樣的特征和/或過(guò)程或者單元中的至少一些是相互排斥之外，可以采用任何組合對(duì)本說(shuō)明書(shū)(包括伴隨的權(quán)利要求、摘要和附圖)中公開(kāi)的所有特征以及如此公開(kāi)的任何方法或者設(shè)備的所有過(guò)程或單元進(jìn)行組合。除非另外明確陳述，本說(shuō)明書(shū)(包括伴隨的權(quán)利要求、摘要和附圖)中公開(kāi)的每個(gè)特征可以由提供相同、等同或相似目的的替代特征來(lái)代替。

此外，本領(lǐng)域的技術(shù)人員能夠理解，盡管在此的一些實(shí)施例包括其它實(shí)施例中所包括的某些特征而不是其它特征，但是不同實(shí)施例的特征的組合意味著處于本發(fā)明的范圍之內(nèi)并且形成不同的實(shí)施例。例如，在下面的權(quán)利要求書(shū)中，所要求保護(hù)的實(shí)施例的任意之一都可以以任意的組合方式來(lái)使用。

本發(fā)明的各個(gè)部件實(shí)施例可以以硬件實(shí)現(xiàn)，或者以在一個(gè)或者多個(gè)處理器上運(yùn)行的軟件模塊實(shí)現(xiàn)，或者以它們的組合實(shí)現(xiàn)。本領(lǐng)域的技術(shù)人員應(yīng)當(dāng)理解，可以在實(shí)踐中使用微處理器或者數(shù)字信號(hào)處理器(DSP)來(lái)實(shí)現(xiàn)根據(jù)本發(fā)明實(shí)施例的裝置中的一些或者全部部件的一些或者全部功能。本發(fā)明還可以實(shí)現(xiàn)為用于執(zhí)行這里所描述的方法的一部分或者全部的設(shè)備或者裝置程序(例如，計(jì)算機(jī)程序和計(jì)算機(jī)程序產(chǎn)品)。這樣的實(shí)現(xiàn)本發(fā)明的程序可以存儲(chǔ)在計(jì)算機(jī)可讀介質(zhì)上，或者可以具有一個(gè)或者多個(gè)信號(hào)的形式。這樣的信號(hào)可以從因特網(wǎng)網(wǎng)站上下載得到，或者在載體信號(hào)上提供，或者以任何其他形式提供。

應(yīng)該注意的是上述實(shí)施例對(duì)本發(fā)明進(jìn)行說(shuō)明而不是對(duì)本發(fā)明進(jìn)行限制，并且本領(lǐng)域技術(shù)人員在不脫離所附權(quán)利要求的范圍的情況下可設(shè)計(jì)出替換實(shí)施例。在權(quán)利要求中，不應(yīng)將位于括號(hào)之間的任何參考符號(hào)構(gòu)造成對(duì)權(quán)利要求的限制。單詞“包含”不排除存在未列在權(quán)利要求中的元件或步驟。位于元件之前的單詞“一”或“一個(gè)”不排除存在多個(gè)這樣的元件。本發(fā)明可以借助于包括有若干不同元件的硬件以及借助于適當(dāng)編程的計(jì)算機(jī)來(lái)實(shí)現(xiàn)。在列舉了若干裝置的單元權(quán)利要求中，這些裝置中的若干個(gè)可以是通過(guò)同一個(gè)硬件項(xiàng)來(lái)具體體現(xiàn)。單詞第一、第二、以及第三等的使用不表示任何順序。可將這些單詞解釋為名稱(chēng)。