大小大于目標(biāo)模塊元素所在目標(biāo)網(wǎng)格的大小，則首先需要平移目標(biāo)模塊元素以及與目標(biāo)模塊元素相鄰的相鄰模塊元素，使得目標(biāo)模塊元素與相鄰模塊元素所占用的網(wǎng)格大小之和與第一網(wǎng)格的大小相同，將目標(biāo)模塊元素與相鄰模塊元素所占用的網(wǎng)格大小之和作為調(diào)整后的目標(biāo)網(wǎng)格，以產(chǎn)生大小與第一網(wǎng)格的大小相同的調(diào)整后的目標(biāo)網(wǎng)格，使得調(diào)整后的目標(biāo)網(wǎng)格可以放置第一模塊元素。
[0031]本實施例通過在第一模塊元素之前所在第一網(wǎng)格的大小大于目標(biāo)模塊元素所在目標(biāo)網(wǎng)格的大小的時候，移動所述目標(biāo)模塊元素，以及與目標(biāo)模塊元素相鄰的相鄰模塊元素，以使目標(biāo)網(wǎng)格的大小與相鄰模塊元素所占用的網(wǎng)格大小之和滿足第一網(wǎng)格的大小要求，從而使得在第一網(wǎng)格的大小大于目標(biāo)網(wǎng)格的大小的時候，可以調(diào)整目標(biāo)網(wǎng)格的大小，使得調(diào)整后的目標(biāo)網(wǎng)格可以放置第一模塊元素，進而實現(xiàn)了第一模塊元素與目標(biāo)模塊元素不重疊的問題。同時，可以將頁面上模塊元素的變化展示出來，使得用戶可以實時看到頁面上各個模塊元素的變化過程，以便用戶可以根據(jù)自己的需求改變網(wǎng)頁面的布局。
[0032]進一步地，步驟203的另一種實施方式，具體為:
[0033]若所述第一網(wǎng)格的大小小于所述目標(biāo)網(wǎng)格的大小，則移動所述目標(biāo)模塊元素，并確定所述第一網(wǎng)格的大小與所述目標(biāo)網(wǎng)格的大小的差值；從網(wǎng)頁頁面上的其他模塊元素中確定占用網(wǎng)格大小與所述差值大小相等的第二模塊元素，并將所述第二模塊元素移動至所述目標(biāo)網(wǎng)格中，所述其他模塊元素為除了所述目標(biāo)模塊元素和所述第一模塊元素之外的模塊元素。
[0034]在本實施方式中，具體的，若第一模塊元素之前所在第一網(wǎng)格的大小小于目標(biāo)模塊元素所在目標(biāo)網(wǎng)格的大小，那么只需要移動目標(biāo)模塊元素，從而將第一模塊元素放置到目標(biāo)網(wǎng)格上。此時，目標(biāo)網(wǎng)格上還有空余的位置，則計算第一網(wǎng)格的大小與目標(biāo)網(wǎng)格的大小的差值，然后從網(wǎng)頁頁面上的其他模塊元素中尋找可以填充這個空余的位置的第二模塊元素。具體的，從除了目標(biāo)模塊元素和第一模塊元素之外的模塊元素中尋找占用的網(wǎng)格大小，與差值大小相同的第二模塊元素；然后將尋找到的可以填充目標(biāo)網(wǎng)格的空余的位置的第二模塊元素移動到目標(biāo)網(wǎng)格上，其中，第二模塊元素可是一個模塊元素，也可以是多個模塊元素的集合；此時將目標(biāo)網(wǎng)格的大小調(diào)整為第一模塊元素的大小。實現(xiàn)了在第一模塊元素之前所在第一網(wǎng)格的大小小于目標(biāo)模塊元素所在目標(biāo)網(wǎng)格的大小的時候，移動了目標(biāo)模塊元素，并且完全填充了目標(biāo)網(wǎng)格，使得移動了目標(biāo)模塊元素之后，目標(biāo)網(wǎng)格處不產(chǎn)生空白。
[0035]進一步地，在步驟202之后，若第一網(wǎng)格的大小與目標(biāo)網(wǎng)格的大小一致，則步驟203的又一種實施方式,具體為:
[0036]若所述第一網(wǎng)格的大小與所述目標(biāo)網(wǎng)格的大小一致，則移動所述目標(biāo)模塊元素至所述第一網(wǎng)格中。
[0037]在本實施方式中，具體的，若第一模塊元素之前所在第一網(wǎng)格的大小與目標(biāo)模塊元素所在目標(biāo)網(wǎng)格的大小相同，則將第一模塊元素放置到目標(biāo)網(wǎng)格中，并將目標(biāo)模塊元素放置到第一網(wǎng)格中。從而實現(xiàn)了第一模塊元素與目標(biāo)模塊元素的位置互換。
[0038]進一步地，在步驟203的調(diào)整所述目標(biāo)網(wǎng)格所占用網(wǎng)格單元的個數(shù)，以放置所述第一模塊元素之后，還包括:
[0039]若存在所占用網(wǎng)格大小與所述第一網(wǎng)格大小相互匹配的第三模塊元素，則將所述第三模塊元素移動至所述第一網(wǎng)格中。
[0040]在本實施方式中，具體的，在調(diào)整了目標(biāo)網(wǎng)格所占用的網(wǎng)格單元的個數(shù)，將第一模塊元素放置到目標(biāo)網(wǎng)格上之后，第一模塊元素之前所在的第一網(wǎng)格處會產(chǎn)生空白，需要尋找大小與第一網(wǎng)格大小相互匹配的第三模塊元素，將其放置到第一網(wǎng)格中，使得第一網(wǎng)格處不會產(chǎn)生空白。
[0041]具體的尋找第三模塊元素的過程為:在當(dāng)?shù)谝荒K元素的中心點離開第一模塊元素之前所在的第一網(wǎng)格時，確定在第一網(wǎng)格的垂直相鄰位置處，由下至上垂直查找是否存在占用網(wǎng)格的大小與第一網(wǎng)格的大小相同的模塊兀素，若存在，貝1J將該模塊兀素作為第三模塊元素平移到第一網(wǎng)格中，若不存在，則在第一網(wǎng)格的水平相鄰位置處，由右至左水平查找去確定若存在占用網(wǎng)格的大小與第一網(wǎng)格的大小相同的模塊兀素，則將該模塊兀素作為第三模塊元素平移到第一網(wǎng)格中。
[0042]另外一種尋找第三模塊元素的過程為:在當(dāng)?shù)谝荒K元素的中心點離開第一模塊元素之前所在的第一網(wǎng)格時，確定在第一網(wǎng)格的水平相鄰位置處，由右至左水平查找是否存在占用網(wǎng)格的大小與第一網(wǎng)格的大小相同的模塊元素，若存在，則將該模塊元素作為第三模塊元素平移到第一網(wǎng)格中，若不存在，則在第一網(wǎng)格的垂直相鄰位置處，由下至上垂直查找去確定若存在占用網(wǎng)格的大小與第一網(wǎng)格的大小相同的模塊兀素，則將該模塊兀素作為第三模塊元素平移到第一網(wǎng)格中。
[0043]再一種尋找第三模塊元素的過程為:在當(dāng)?shù)谝荒K元素的中心點離開第一模塊元素之前所在的第一網(wǎng)格時，確定在第一網(wǎng)格的垂直相鄰位置處，由下至上垂直查找是否存在占用網(wǎng)格的寬度小于第一網(wǎng)格的寬度的模塊元素，若存在，則將該模塊元素作為第三模塊元素，將第三模塊元素部分平移到第一網(wǎng)格中，然后在網(wǎng)頁頁面中尋找大小等于第一網(wǎng)格剩余空間的大小的第四模塊元素，將第四模塊元素移動至第一網(wǎng)格剩余空間上；若不存在，則在第一網(wǎng)格的水平相鄰位置處，由右至左水平查找去確定若存在占用網(wǎng)格的高度小于與第一網(wǎng)格的高度的模塊元素，則將該模塊元素作為第三模塊元素，將第三模塊元素部分平移到第一網(wǎng)格中，然后在在網(wǎng)頁頁面中尋找大小等于第一網(wǎng)格剩余空間的大小的第五模塊元素，將第五模塊元素移動至第一網(wǎng)格剩余空間上。
[0044]又一種尋找第三模塊元素的過程為:在當(dāng)?shù)谝荒K元素的中心點離開第一模塊元素之前所在的第一網(wǎng)格時，確定在第一網(wǎng)格的水平相鄰位置處，由右至左水平查找是否存在占用網(wǎng)格的高度小于第一網(wǎng)格的高度的模塊元素，若存在，則將該模塊元素作為第三模塊元素，將第三模塊元素部分平移到第一網(wǎng)格中，然后在網(wǎng)頁頁面中尋找大小等于第一網(wǎng)格剩余空間的大小的第四模塊元素，將第四模塊元素移動至第一網(wǎng)格剩余空間上；若不存在，則在第一網(wǎng)格的垂直相鄰位置處，由下至上垂直查找去確定若存在占用網(wǎng)格的寬度小于與第一網(wǎng)格的寬度的模塊元素，則將該模塊元素作為第三模塊元素，將第三模塊元素部分平移到第一網(wǎng)格中，然后在在網(wǎng)頁頁面中尋找大小等于第一網(wǎng)格剩余空間的大小的第五模塊元素，將第五模塊元素移動至第一網(wǎng)格剩余空間上。
[0045]圖3為本發(fā)明實施例三提供的一種網(wǎng)頁頁面布局的調(diào)整裝置的結(jié)構(gòu)示意圖，如圖3所示,本實施例的裝置包括:
[0046]網(wǎng)格劃分模塊31，用于根據(jù)預(yù)設(shè)的網(wǎng)格的大小，將網(wǎng)頁頁面劃分為網(wǎng)格單元；
[0047]移動模塊32，用于將第一模塊元素從第一網(wǎng)格移動至目標(biāo)網(wǎng)格，所述第一網(wǎng)格包括至少一個所述網(wǎng)格單元，所述第一模塊元素用于承載所述第一網(wǎng)格上的數(shù)據(jù)內(nèi)容；
[0048]網(wǎng)格調(diào)整模塊33，用于若所述第一網(wǎng)格的大小與所述目標(biāo)網(wǎng)格的大小不一致，則移動所述目標(biāo)網(wǎng)格對應(yīng)的目標(biāo)模塊元素，并調(diào)整所述目標(biāo)網(wǎng)格所占用網(wǎng)格單元的個數(shù)，以放置所述第一模塊元素。
[0049]在上述技術(shù)方案的基礎(chǔ)上，進一步地，所述網(wǎng)格調(diào)整模塊33，具體用于:
[0050]若所述第一網(wǎng)格的大小大于所述目標(biāo)網(wǎng)格的大小，則移動所述目標(biāo)模塊元素，以及與所述目標(biāo)模塊元素相鄰的相鄰模塊元素，以使所述目標(biāo)網(wǎng)格的大小與所述相鄰模塊元素所占用的網(wǎng)格大小之和滿足所述第一網(wǎng)格的大小要求；
[0051]若所述第一網(wǎng)格的大小小于所述目標(biāo)網(wǎng)格的大小，則移動所述目標(biāo)模塊元素，并確定所述第一網(wǎng)格的大小與所述目標(biāo)網(wǎng)格的大小的差值；從網(wǎng)頁頁面上的其他模塊元素中確定占用網(wǎng)格大小與所述差值大小相等的第二模塊元素，并將所述第二模塊元素移動至所述目標(biāo)網(wǎng)格中，所述其他模塊元素為除了所述目