一種頁(yè)面中元素的布局方法和裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本申請(qǐng)涉及互聯(lián)網(wǎng)領(lǐng)域，更具體地涉及一種頁(yè)面中元素的布局方法和裝置。
【背景技術(shù)】
[0002]瀑布流，又稱瀑布流式布局，是目前比較流行的一種網(wǎng)站頁(yè)面中元素的布局方法，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前數(shù)據(jù)塊的尾部。目前瀑布流的布局方式主要應(yīng)用于輕博客與導(dǎo)購(gòu)網(wǎng)站。
[0003]現(xiàn)有的瀑布流式布局方法通常通過(guò)以下步驟實(shí)現(xiàn):a)從瀏覽器腳本獲取容器寬度山)設(shè)定列寬度；c)計(jì)算列數(shù):列數(shù)=容器寬度/列寬度；d)保存每個(gè)列的當(dāng)前高度作為起始高度；e)依次取容器中的所有數(shù)據(jù)塊元素，尋找當(dāng)前高度最小的一列進(jìn)行排列；f)根據(jù)所排列的列的序號(hào)和當(dāng)前高度，確定該數(shù)據(jù)塊元素的橫坐標(biāo)和縱坐標(biāo)(橫坐標(biāo)為所在列的序號(hào)乘以列寬，縱坐標(biāo)為所在列的當(dāng)前高度);g)更新所在列的當(dāng)前高度。至此，插入一個(gè)元素結(jié)束。以這種方式，可以插入全部元素，從而完成全部元素在頁(yè)面中的布局。
[0004]但是,上述技術(shù)方案存在缺陷。一方面，該方案要求待排列兀素的寬度相對(duì)固定，對(duì)元素的布局靈活性不高；另一方面，每一列的列寬度固定，無(wú)法適配多種類別的終端;第三，布局算法不支持元素寬度不相等的情況。
[0005]因此，在本領(lǐng)域中，需要一種頁(yè)面中元素的布局方案，能夠適用于各種不同種類的終端，并且能夠適應(yīng)于不同寬度的元素，避免現(xiàn)有技術(shù)中對(duì)元素的布局靈活性不高和無(wú)法適配多種類別的終端等問(wèn)題。

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

[0006]本申請(qǐng)的主要目的在于，提供一種頁(yè)面中元素的布局技術(shù)，以解決現(xiàn)有技術(shù)中元素的布局靈活性不高和無(wú)法適配多種類別的終端等問(wèn)題。
[0007]根據(jù)本申請(qǐng)的第一方面，提供了一種頁(yè)面中元素的布局方法，其特征在于，包括:將頁(yè)面中的容器劃分為具有預(yù)定列寬度的多個(gè)列；根據(jù)元素寬度和每一列的當(dāng)前列高度確定元素的位置；以及根據(jù)元素的位置對(duì)元素進(jìn)行布局。
[0008]根據(jù)本申請(qǐng)的第二方面，提供了一種頁(yè)面中元素的布局裝置，其特征在于，包括:劃分模塊，用于將頁(yè)面中的容器劃分為具有預(yù)定列寬度的多個(gè)列；確定模塊，用于根據(jù)元素寬度和每一列的當(dāng)前列高度確定元素的位置；以及布局模塊，用于根據(jù)元素的位置對(duì)元素進(jìn)行布局。
[0009]與現(xiàn)有技術(shù)相比，根據(jù)本申請(qǐng)的技術(shù)方案，能夠適用于各種不同種類的終端，并且能夠適應(yīng)于不同寬度的元素，從而避免現(xiàn)有技術(shù)中對(duì)元素的布局靈活性不高和無(wú)法適配多種類別的終端等問(wèn)題。
【附圖說(shuō)明】
[0010]此處所說(shuō)明的附圖用來(lái)提供對(duì)本申請(qǐng)的進(jìn)一步理解，構(gòu)成本申請(qǐng)的一部分，本申請(qǐng)的示意性實(shí)施例及其說(shuō)明用于解釋本申請(qǐng)，并不構(gòu)成對(duì)本申請(qǐng)的限定。在附圖中:
[0011]圖1是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的頁(yè)面中元素的布局方法的流程圖；
[0012]圖2是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的頁(yè)面中元素的布局方法的更詳細(xì)的流程圖；
[0013]圖3是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的根據(jù)元素寬度和每一列的當(dāng)前列高度，對(duì)元素以特定規(guī)則針對(duì)每一列進(jìn)行試排，以確定元素的位置的步驟的更詳細(xì)的流程圖；
[0014]圖4是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的頁(yè)面中元素的布局方法的示意圖；以及
[0015]圖5是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的頁(yè)面中元素的布局裝置的結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0016]本申請(qǐng)的主要思想在于，通過(guò)將頁(yè)面中的容器劃分為具有預(yù)定列寬度的多個(gè)列，可以根據(jù)元素寬度和每一列的當(dāng)前列高度確定元素的位置，從而根據(jù)元素的位置對(duì)元素進(jìn)行布局。該技術(shù)方案能夠適用于各種不同種類的終端(例如，PC端、Ipad等平板設(shè)備端或手機(jī)端)，并且能夠適應(yīng)于不同寬度的元素，從而避免現(xiàn)有技術(shù)中對(duì)元素的布局靈活性不高和無(wú)法適配多種類別的終端等問(wèn)題。
[0017]為使本申請(qǐng)的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本申請(qǐng)具體實(shí)施例及相應(yīng)的附圖對(duì)本申請(qǐng)技術(shù)方案進(jìn)行清楚、完整地描述。顯然，所描述的實(shí)施例僅是本申請(qǐng)一部分實(shí)施例，而不是全部的實(shí)施例。基于本申請(qǐng)中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本申請(qǐng)保護(hù)的范圍。
[0018]參考圖1，圖1是根據(jù)本申請(qǐng)一個(gè)實(shí)施例的頁(yè)面中元素的布局方法100的流程圖。如圖1所示，方法100開始于步驟101。
[0019]在步驟101，將頁(yè)面中的容器劃分為具有預(yù)定列寬度的多個(gè)列。
[0020]具體而言，不同的終端具有不同的瀏覽器。可以從瀏覽器腳本中獲得頁(yè)面的寬度和指定容器的寬度，然后可以根據(jù)預(yù)先設(shè)定的列寬度，將容器的寬度劃分為多個(gè)列。例如，頁(yè)面的寬度為1280像素,頁(yè)面中指定容器的寬度為1024像素?？梢詫⒘袑挾阮A(yù)設(shè)為128像素，這樣，可以將容器等分為8列。
[0021]在步驟102，根據(jù)元素寬度和每一列的當(dāng)前列高度確定元素的位置。
[0022]具體而言，在步驟101中將容器劃分為多個(gè)列后，可以預(yù)先設(shè)定每一列的初始列高度，并且，根據(jù)待布局元素的寬度和每一列的寬度，可以得到每個(gè)元素需占用的列數(shù)。根據(jù)元素需占用的列數(shù)和每一列的當(dāng)前列高度確定元素的位置。
[0023]根據(jù)本申請(qǐng)的一個(gè)實(shí)施例，可以根據(jù)元素寬度和每一列的當(dāng)前列高度，對(duì)元素以特定規(guī)則針對(duì)每一列進(jìn)行試排，以確定元素的位置。
[0024]優(yōu)選地，上述特定規(guī)則為向上向左原則或向上向右原則。其中，向上向左原則是:在對(duì)元素進(jìn)行試排的過(guò)程中，從最左邊的第一列開始向右試排，并且，以容器最上側(cè)作為X軸，以容器最左側(cè)作為Y軸，在所有可布局的位置中，盡量向上并向左進(jìn)行布局。類似地，向上向右原則是:在對(duì)元素進(jìn)行試排的過(guò)程中，從最右邊的第一列開始向左試排，并且，以容器最上側(cè)作為X軸，以容器最左側(cè)作為Y軸，在所有可布局的位置中，盡量向上并向右進(jìn)行布局。
[0025]在對(duì)元素以特定規(guī)則針對(duì)每一列進(jìn)行試排的過(guò)程中，元素需占用的列數(shù)是固定不變的。將元素在每一列進(jìn)行試排時(shí)，所覆蓋的寬度為該元素需占用的列數(shù)。例如，元素a的寬度為256像素(px),高度為128像素，列寬度為128像素，則元素a所占的列數(shù)為256/128=2列。這樣，在對(duì)元素a以向左向上原則針對(duì)每一列進(jìn)行試排后，可以基于元素a需占用的列數(shù)和每一列的當(dāng)前列高度得到元素a左上角的坐標(biāo)，從而可以確定其在容器中布局的位置。
[0026]需要說(shuō)明的是，在計(jì)算元素需要占的列數(shù)時(shí)，遵循向上取整原則。例如，元素a的寬度為312像素，列寬度為128像素,則元素a所占的列數(shù)=312/128=2.4,根據(jù)向上取整原則，元素a需占用的列數(shù)為3列。
[0027]在步驟103，根據(jù)元素的位置對(duì)元素進(jìn)行布局。
[0028]具體而言，在經(jīng)過(guò)步驟102確定元素在容器中的左上角或右上角坐標(biāo)后，可以根據(jù)該坐標(biāo)對(duì)該元素在容器中定位，從而完成布局。
[0029]在實(shí)際操作中，可以通過(guò)上述方法100得到每一個(gè)待布局元素在容器中的位置。通過(guò)對(duì)每一個(gè)元素進(jìn)行布局，可以完成對(duì)所有元素在容器中的布局。另外，在根據(jù)元