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

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

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