網(wǎng)頁頁面布局的調(diào)整方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)頁技術(shù)，尤其涉及一種網(wǎng)頁頁面布局的調(diào)整方法及裝置。
【背景技術(shù)】
[0002]所有的網(wǎng)站都需要定義其網(wǎng)頁的外觀，即進(jìn)行網(wǎng)頁頁面布局。在網(wǎng)頁頁面上，將需要顯示的內(nèi)容放入模塊元素中，從而進(jìn)行網(wǎng)頁頁面布局的時候，可以更改網(wǎng)頁中各個模塊對象的位置、大小。
[0003]現(xiàn)有技術(shù)中，進(jìn)行網(wǎng)頁頁面布局的過程中，終端通過改變當(dāng)前模塊元素在網(wǎng)頁頁面上的位置，來實(shí)現(xiàn)對網(wǎng)頁頁面的布局。
[0004]但是，現(xiàn)有技術(shù)中，將模塊元素移動到目標(biāo)位置的時候，當(dāng)前模塊元素會與目標(biāo)位置處的模塊元素相互重疊，阻礙了目標(biāo)位置處的模塊元素的內(nèi)容的展示。從而造成模塊元素之間相互重疊的現(xiàn)象，不利于網(wǎng)頁上模塊元素的內(nèi)容的展示。

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

[0005]本發(fā)明提供一種網(wǎng)頁頁面布局的調(diào)整方法及裝置，用以解決現(xiàn)有技術(shù)中的在將模塊元素移動到目標(biāo)位置的時候，當(dāng)前模塊元素會與目標(biāo)位置處的模塊元素相互重疊，而不利于網(wǎng)頁上模塊元素的內(nèi)容的展示的問題。
[0006]本發(fā)明的第一個方面是提供一種網(wǎng)頁頁面布局的調(diào)整方法，包括:
[0007]根據(jù)預(yù)設(shè)的網(wǎng)格的大小，將網(wǎng)頁頁面劃分為網(wǎng)格單元；
[0008]將第一模塊元素從第一網(wǎng)格移動至目標(biāo)網(wǎng)格，所述第一網(wǎng)格包括至少一個所述網(wǎng)格單元，所述第一模塊元素用于承載所述第一網(wǎng)格上的數(shù)據(jù)內(nèi)容；若所述第一網(wǎng)格的大小與所述目標(biāo)網(wǎng)格的大小不一致，則移動所述目標(biāo)網(wǎng)格對應(yīng)的目標(biāo)模塊元素，并調(diào)整所述目標(biāo)網(wǎng)格所占用網(wǎng)格單元的個數(shù)，以放置所述第一模塊元素。
[0009]本發(fā)明的另一個方面是提供一種網(wǎng)頁頁面布局的調(diào)整裝置，包括:
[0010]網(wǎng)格劃分模塊，用于根據(jù)預(yù)設(shè)的網(wǎng)格的大小，將網(wǎng)頁頁面劃分為網(wǎng)格單元；
[0011]移動模塊，用于將第一模塊元素從第一網(wǎng)格移動至目標(biāo)網(wǎng)格，所述第一網(wǎng)格包括至少一個所述網(wǎng)格單元，所述第一模塊元素用于承載所述第一網(wǎng)格上的數(shù)據(jù)內(nèi)容；
[0012]網(wǎng)格調(diào)整模塊，用于若所述第一網(wǎng)格的大小與所述目標(biāo)網(wǎng)格的大小不一致，則移動所述目標(biāo)網(wǎng)格對應(yīng)的目標(biāo)模塊元素，并調(diào)整所述目標(biāo)網(wǎng)格所占用網(wǎng)格單元的個數(shù)，以放置所述第一模塊元素。
[0013]本發(fā)明通過根據(jù)預(yù)設(shè)的網(wǎng)格的大小，將網(wǎng)頁頁面劃分為網(wǎng)格單元；然后將第一模塊元素從第一網(wǎng)格移動至目標(biāo)網(wǎng)格，第一網(wǎng)格包括至少一個網(wǎng)格單元，第一模塊元素用于承載第一網(wǎng)格上的數(shù)據(jù)內(nèi)容；若第一網(wǎng)格的大小與目標(biāo)網(wǎng)格的大小不一致，則移動目標(biāo)網(wǎng)格對應(yīng)的目標(biāo)模塊元素，并調(diào)整目標(biāo)網(wǎng)格所占用網(wǎng)格單元的個數(shù)，以放置第一模塊元素。實(shí)現(xiàn)了將當(dāng)前需要移動的第一模塊元素放置到目標(biāo)模塊元素所在的目標(biāo)網(wǎng)格處的時候，而第一模塊元素與目標(biāo)模塊元素的大小不一致，第一模塊元素不會與目標(biāo)模塊元素產(chǎn)生重疊，不妨礙網(wǎng)頁上模塊元素的內(nèi)容的展示。
【附圖說明】
[0014]圖1為本發(fā)明實(shí)施例一提供的一種網(wǎng)頁頁面布局的調(diào)整方法的流程圖；
[0015]圖2為本發(fā)明實(shí)施例二提供的一種網(wǎng)頁頁面布局的調(diào)整方法的流程圖；
[0016]圖3為本發(fā)明實(shí)施例三提供的一種網(wǎng)頁頁面布局的調(diào)整裝置的結(jié)構(gòu)示意圖。
【具體實(shí)施方式】
[0017]為使本發(fā)明實(shí)施例的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合本發(fā)明實(shí)施例中的附圖，對本發(fā)明實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述，顯然，所描述的實(shí)施例是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。
[0018]圖1為本發(fā)明實(shí)施例一提供的一種網(wǎng)頁頁面布局的調(diào)整方法的流程圖，如圖1所示，本實(shí)施例的方法包括:
[0019]步驟101、根據(jù)預(yù)設(shè)的網(wǎng)格的大小，將網(wǎng)頁頁面劃分為網(wǎng)格單元。
[0020]在本實(shí)施例中，具體的，網(wǎng)頁頁面上有多個不同大小的模塊元素，每個模塊元素上承載了需要在網(wǎng)頁頁面上顯示的內(nèi)容，比如一個模塊元素上承載了文字，或者承載了一張圖片。首先，根據(jù)預(yù)先設(shè)定的網(wǎng)格的大小，將當(dāng)前的網(wǎng)頁頁面劃分為多個網(wǎng)格單元。具體的劃分過程為:獲取網(wǎng)頁頁面上的所有模塊元素的左上角的點(diǎn)的坐標(biāo)值，以及所有模塊元素的右下角的點(diǎn)的坐標(biāo)值；計算所有點(diǎn)的水平坐標(biāo)值中的距離最小值，為第一計算值；計算所有點(diǎn)的垂直坐標(biāo)值中的距離最小值，為第二計算值；然后，計算第一計算值和第二計算值中最小的值為第三計算值，若第三計算值是其他所有坐標(biāo)值的距離值的整數(shù)倍，則將第三計算值作為一個網(wǎng)格單元的邊長，將網(wǎng)頁頁面劃分為等大小的多個網(wǎng)格單元，網(wǎng)格單元為正方形；若第三計算值不是其他所有坐標(biāo)值的距離值的整數(shù)倍，則將第三計算值除以一個素數(shù)之后得到第四計算值，若第四計算值是其他所有坐標(biāo)值的距離值的整數(shù)倍，則將第四計算值作為一個網(wǎng)格單元的邊長，將網(wǎng)頁頁面劃分為等大小的多個網(wǎng)格單元，網(wǎng)格單元為正方形；若第四計算值不是其他所有坐標(biāo)值的距離值的整數(shù)倍，則將第三計算值除以另外一個素數(shù)，直至得到的第四計算值是其他所有坐標(biāo)值的距離值的整數(shù)倍。
[0021]步驟102、將第一模塊元素從第一網(wǎng)格移動至目標(biāo)網(wǎng)格，所述第一網(wǎng)格包括至少一個所述網(wǎng)格單元，所述第一模塊元素用于承載所述第一網(wǎng)格上的數(shù)據(jù)內(nèi)容。
[0022]在本實(shí)施例中，具體的,第一模塊兀素位于第一網(wǎng)格上,第一網(wǎng)格包括了至少一個網(wǎng)格單元，第一模塊元素上承載了需要在第一網(wǎng)格的位置處顯示的數(shù)據(jù)內(nèi)容，將第一模塊元素從第一網(wǎng)格移動到目標(biāo)網(wǎng)格上。
[0023]步驟103、若所述第一網(wǎng)格的大小與所述目標(biāo)網(wǎng)格的大小不一致，則移動所述目標(biāo)網(wǎng)格對應(yīng)的目標(biāo)模塊元素，并調(diào)整所述目標(biāo)網(wǎng)格所占用網(wǎng)格單元的個數(shù)，以放置所述第一模塊元素。
[0024]當(dāng)?shù)谝荒K元素的中心點(diǎn)進(jìn)入目標(biāo)網(wǎng)格的時候，由于第一模塊元素上承載了需要在第一網(wǎng)格的位置處顯示的數(shù)據(jù)內(nèi)容，并且，目標(biāo)網(wǎng)格上的目標(biāo)模塊元素上承載了需要在目標(biāo)網(wǎng)格位置處顯示的數(shù)據(jù)內(nèi)容，此時，第一模塊元素上的數(shù)據(jù)內(nèi)容會與目標(biāo)模塊元素上的數(shù)據(jù)內(nèi)容產(chǎn)生重疊，從而第一模塊元素上的數(shù)據(jù)內(nèi)容擋住了目標(biāo)模塊元素上的數(shù)據(jù)內(nèi)容的展示，需要移動目標(biāo)網(wǎng)格對應(yīng)的目標(biāo)模塊元素；由于第一網(wǎng)格的大小與目標(biāo)網(wǎng)格的大小不一致，則調(diào)整目標(biāo)網(wǎng)格所占用的網(wǎng)格單元的個數(shù)，使得調(diào)整后的目標(biāo)網(wǎng)格的大小適應(yīng)第一模塊兀素的大小，以放置第一模塊兀素。
[0025]本實(shí)施例通過根據(jù)預(yù)設(shè)的網(wǎng)格的大小，將網(wǎng)頁頁面劃分為網(wǎng)格單元；將第一模塊元素從第一網(wǎng)格移動至目標(biāo)網(wǎng)格之后，若第一網(wǎng)格的大小與目標(biāo)網(wǎng)格的大小不一致，則移動目標(biāo)網(wǎng)格對應(yīng)的目標(biāo)模塊元素，使得第一模塊元素上的數(shù)據(jù)內(nèi)容不會擋住了目標(biāo)模塊元素上的數(shù)據(jù)內(nèi)容的展示；并調(diào)整目標(biāo)網(wǎng)格所占用網(wǎng)格單元的個數(shù)，以放置第一模塊元素，使得第一模塊元素被移動到合適的位置處。從而實(shí)現(xiàn)了移動模塊元素之后，模塊元素之間不會產(chǎn)生重疊，不妨礙網(wǎng)頁上模塊元素的內(nèi)容的展示。
[0026]圖2為本發(fā)明實(shí)施例二提供的一種網(wǎng)頁頁面布局的調(diào)整方法的流程圖，如圖2所示，本實(shí)施例的方法包括:
[0027]步驟201、根據(jù)預(yù)設(shè)的網(wǎng)格的大小，將網(wǎng)頁頁面劃分為網(wǎng)格單元。
[0028]步驟202、將第一模塊元素從第一網(wǎng)格移動至目標(biāo)網(wǎng)格，所述第一網(wǎng)格包括至少一個所述網(wǎng)格單元，所述第一模塊元素用于承載所述第一網(wǎng)格上的數(shù)據(jù)內(nèi)容。
[0029]步驟203、若所述第一網(wǎng)格的大小大于所述目標(biāo)網(wǎng)格的大小，則移動所述目標(biāo)模塊元素，以及與所述目標(biāo)模塊元素相鄰的相鄰模塊元素，以使所述目標(biāo)網(wǎng)格的大小與所述相鄰模塊元素所占用的網(wǎng)格大小之和滿足所述第一網(wǎng)格的大小要求。
[0030]在本實(shí)施例中，具體的，若第一模塊兀素之前所在第一網(wǎng)格的