CN105608084B - 网页页面布局的调整方法及装置 - Google Patents

Abstract

本发明提供一种网页页面布局的调整方法及装置，其中，该方法包括：根据预设的网格的大小，将网页页面划分为网格单元；将第一模块元素从第一网格移动至目标网格，第一网格包括至少一个网格单元，第一模块元素用于承载第一网格上的数据内容；若第一网格的大小与目标网格的大小不一致，则移动目标网格对应的目标模块元素，并调整目标网格所占用网格单元的个数，以放置第一模块元素。实现了将第一模块元素移动到目标模块元素所在的目标网格处的时候，而第一模块元素与目标模块元素的大小不一致，第一模块元素不会与目标模块元素产生重叠，不妨碍网页上模块元素的内容的展示。

Description

网页页面布局的调整方法及装置

技术领域

本发明涉及网页技术，尤其涉及一种网页页面布局的调整方法及装置。

背景技术

所有的网站都需要定义其网页的外观，即进行网页页面布局。在网页页面上，将需要显示的内容放入模块元素中，从而进行网页页面布局的时候，可以更改网页中各个模块对象的位置、大小。

现有技术中，进行网页页面布局的过程中，终端通过改变当前模块元素在网页页面上的位置，来实现对网页页面的布局。

但是，现有技术中，将模块元素移动到目标位置的时候，当前模块元素会与目标位置处的模块元素相互重叠，阻碍了目标位置处的模块元素的内容的展示。从而造成模块元素之间相互重叠的现象，不利于网页上模块元素的内容的展示。

发明内容

本发明提供一种网页页面布局的调整方法及装置，用以解决现有技术中的在将模块元素移动到目标位置的时候，当前模块元素会与目标位置处的模块元素相互重叠，而不利于网页上模块元素的内容的展示的问题。

本发明的第一个方面是提供一种网页页面布局的调整方法，包括：

根据预设的网格的大小，将网页页面划分为网格单元；

将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容；若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素。

本发明的另一个方面是提供一种网页页面布局的调整装置，包括：

网格划分模块，用于根据预设的网格的大小，将网页页面划分为网格单元；

移动模块，用于将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容；

网格调整模块，用于若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素。

本发明通过根据预设的网格的大小，将网页页面划分为网格单元；然后将第一模块元素从第一网格移动至目标网格，第一网格包括至少一个网格单元，第一模块元素用于承载第一网格上的数据内容；若第一网格的大小与目标网格的大小不一致，则移动目标网格对应的目标模块元素，并调整目标网格所占用网格单元的个数，以放置第一模块元素。实现了将当前需要移动的第一模块元素放置到目标模块元素所在的目标网格处的时候，而第一模块元素与目标模块元素的大小不一致，第一模块元素不会与目标模块元素产生重叠，不妨碍网页上模块元素的内容的展示。

附图说明

图1为本发明实施例一提供的一种网页页面布局的调整方法的流程图；

图2为本发明实施例二提供的一种网页页面布局的调整方法的流程图；

图3为本发明实施例三提供的一种网页页面布局的调整装置的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

图1为本发明实施例一提供的一种网页页面布局的调整方法的流程图，如图1所示，本实施例的方法包括：

步骤101、根据预设的网格的大小，将网页页面划分为网格单元。

在本实施例中，具体的，网页页面上有多个不同大小的模块元素，每个模块元素上承载了需要在网页页面上显示的内容，比如一个模块元素上承载了文字，或者承载了一张图片。首先，根据预先设定的网格的大小，将当前的网页页面划分为多个网格单元。具体的划分过程为：获取网页页面上的所有模块元素的左上角的点的坐标值，以及所有模块元素的右下角的点的坐标值；计算所有点的水平坐标值中的距离最小值，为第一计算值；计算所有点的垂直坐标值中的距离最小值，为第二计算值；然后，计算第一计算值和第二计算值中最小的值为第三计算值，若第三计算值是其他所有坐标值的距离值的整数倍，则将第三计算值作为一个网格单元的边长，将网页页面划分为等大小的多个网格单元，网格单元为正方形；若第三计算值不是其他所有坐标值的距离值的整数倍，则将第三计算值除以一个素数之后得到第四计算值，若第四计算值是其他所有坐标值的距离值的整数倍，则将第四计算值作为一个网格单元的边长，将网页页面划分为等大小的多个网格单元，网格单元为正方形；若第四计算值不是其他所有坐标值的距离值的整数倍，则将第三计算值除以另外一个素数，直至得到的第四计算值是其他所有坐标值的距离值的整数倍。

步骤102、将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容。

在本实施例中，具体的，第一模块元素位于第一网格上，第一网格包括了至少一个网格单元，第一模块元素上承载了需要在第一网格的位置处显示的数据内容，将第一模块元素从第一网格移动到目标网格上。

步骤103、若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素。

当第一模块元素的中心点进入目标网格的时候，由于第一模块元素上承载了需要在第一网格的位置处显示的数据内容，并且，目标网格上的目标模块元素上承载了需要在目标网格位置处显示的数据内容，此时，第一模块元素上的数据内容会与目标模块元素上的数据内容产生重叠，从而第一模块元素上的数据内容挡住了目标模块元素上的数据内容的展示，需要移动目标网格对应的目标模块元素；由于第一网格的大小与目标网格的大小不一致，则调整目标网格所占用的网格单元的个数，使得调整后的目标网格的大小适应第一模块元素的大小，以放置第一模块元素。

本实施例通过根据预设的网格的大小，将网页页面划分为网格单元；将第一模块元素从第一网格移动至目标网格之后，若第一网格的大小与目标网格的大小不一致，则移动目标网格对应的目标模块元素，使得第一模块元素上的数据内容不会挡住了目标模块元素上的数据内容的展示；并调整目标网格所占用网格单元的个数，以放置第一模块元素，使得第一模块元素被移动到合适的位置处。从而实现了移动模块元素之后，模块元素之间不会产生重叠，不妨碍网页上模块元素的内容的展示。

图2为本发明实施例二提供的一种网页页面布局的调整方法的流程图，如图2所示，本实施例的方法包括：

步骤201、根据预设的网格的大小，将网页页面划分为网格单元。

步骤202、将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容。

步骤203、若所述第一网格的大小大于所述目标网格的大小，则移动所述目标模块元素，以及与所述目标模块元素相邻的相邻模块元素，以使所述目标网格的大小与所述相邻模块元素所占用的网格大小之和满足所述第一网格的大小要求。

在本实施例中，具体的，若第一模块元素之前所在第一网格的大小大于目标模块元素所在目标网格的大小，则首先需要平移目标模块元素以及与目标模块元素相邻的相邻模块元素，使得目标模块元素与相邻模块元素所占用的网格大小之和与第一网格的大小相同，将目标模块元素与相邻模块元素所占用的网格大小之和作为调整后的目标网格，以产生大小与第一网格的大小相同的调整后的目标网格，使得调整后的目标网格可以放置第一模块元素。

本实施例通过在第一模块元素之前所在第一网格的大小大于目标模块元素所在目标网格的大小的时候，移动所述目标模块元素，以及与目标模块元素相邻的相邻模块元素，以使目标网格的大小与相邻模块元素所占用的网格大小之和满足第一网格的大小要求，从而使得在第一网格的大小大于目标网格的大小的时候，可以调整目标网格的大小，使得调整后的目标网格可以放置第一模块元素，进而实现了第一模块元素与目标模块元素不重叠的问题。同时，可以将页面上模块元素的变化展示出来，使得用户可以实时看到页面上各个模块元素的变化过程，以便用户可以根据自己的需求改变网页面的布局。

进一步地，步骤203的另一种实施方式，具体为：

若所述第一网格的大小小于所述目标网格的大小，则移动所述目标模块元素，并确定所述第一网格的大小与所述目标网格的大小的差值；从网页页面上的其他模块元素中确定占用网格大小与所述差值大小相等的第二模块元素，并将所述第二模块元素移动至所述目标网格中，所述其他模块元素为除了所述目标模块元素和所述第一模块元素之外的模块元素。

在本实施方式中，具体的，若第一模块元素之前所在第一网格的大小小于目标模块元素所在目标网格的大小，那么只需要移动目标模块元素，从而将第一模块元素放置到目标网格上。此时，目标网格上还有空余的位置，则计算第一网格的大小与目标网格的大小的差值，然后从网页页面上的其他模块元素中寻找可以填充这个空余的位置的第二模块元素。具体的，从除了目标模块元素和第一模块元素之外的模块元素中寻找占用的网格大小，与差值大小相同的第二模块元素；然后将寻找到的可以填充目标网格的空余的位置的第二模块元素移动到目标网格上，其中，第二模块元素可是一个模块元素，也可以是多个模块元素的集合；此时将目标网格的大小调整为第一模块元素的大小。实现了在第一模块元素之前所在第一网格的大小小于目标模块元素所在目标网格的大小的时候，移动了目标模块元素，并且完全填充了目标网格，使得移动了目标模块元素之后，目标网格处不产生空白。

进一步地，在步骤202之后，若第一网格的大小与目标网格的大小一致，则步骤203的又一种实施方式，具体为：

若所述第一网格的大小与所述目标网格的大小一致，则移动所述目标模块元素至所述第一网格中。

在本实施方式中，具体的，若第一模块元素之前所在第一网格的大小与目标模块元素所在目标网格的大小相同，则将第一模块元素放置到目标网格中，并将目标模块元素放置到第一网格中。从而实现了第一模块元素与目标模块元素的位置互换。

进一步地，在步骤203的调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素之后，还包括：

若存在所占用网格大小与所述第一网格大小相互匹配的第三模块元素，则将所述第三模块元素移动至所述第一网格中。

在本实施方式中，具体的，在调整了目标网格所占用的网格单元的个数，将第一模块元素放置到目标网格上之后，第一模块元素之前所在的第一网格处会产生空白，需要寻找大小与第一网格大小相互匹配的第三模块元素，将其放置到第一网格中，使得第一网格处不会产生空白。

具体的寻找第三模块元素的过程为：在当第一模块元素的中心点离开第一模块元素之前所在的第一网格时，确定在第一网格的垂直相邻位置处，由下至上垂直查找是否存在占用网格的大小与第一网格的大小相同的模块元素，若存在，则将该模块元素作为第三模块元素平移到第一网格中，若不存在，则在第一网格的水平相邻位置处，由右至左水平查找去确定若存在占用网格的大小与第一网格的大小相同的模块元素，则将该模块元素作为第三模块元素平移到第一网格中。

另外一种寻找第三模块元素的过程为：在当第一模块元素的中心点离开第一模块元素之前所在的第一网格时，确定在第一网格的水平相邻位置处，由右至左水平查找是否存在占用网格的大小与第一网格的大小相同的模块元素，若存在，则将该模块元素作为第三模块元素平移到第一网格中，若不存在，则在第一网格的垂直相邻位置处，由下至上垂直查找去确定若存在占用网格的大小与第一网格的大小相同的模块元素，则将该模块元素作为第三模块元素平移到第一网格中。

再一种寻找第三模块元素的过程为：在当第一模块元素的中心点离开第一模块元素之前所在的第一网格时，确定在第一网格的垂直相邻位置处，由下至上垂直查找是否存在占用网格的宽度小于第一网格的宽度的模块元素，若存在，则将该模块元素作为第三模块元素，将第三模块元素部分平移到第一网格中，然后在网页页面中寻找大小等于第一网格剩余空间的大小的第四模块元素，将第四模块元素移动至第一网格剩余空间上；若不存在，则在第一网格的水平相邻位置处，由右至左水平查找去确定若存在占用网格的高度小于与第一网格的高度的模块元素，则将该模块元素作为第三模块元素，将第三模块元素部分平移到第一网格中，然后在在网页页面中寻找大小等于第一网格剩余空间的大小的第五模块元素，将第五模块元素移动至第一网格剩余空间上。

又一种寻找第三模块元素的过程为：在当第一模块元素的中心点离开第一模块元素之前所在的第一网格时，确定在第一网格的水平相邻位置处，由右至左水平查找是否存在占用网格的高度小于第一网格的高度的模块元素，若存在，则将该模块元素作为第三模块元素，将第三模块元素部分平移到第一网格中，然后在网页页面中寻找大小等于第一网格剩余空间的大小的第四模块元素，将第四模块元素移动至第一网格剩余空间上；若不存在，则在第一网格的垂直相邻位置处，由下至上垂直查找去确定若存在占用网格的宽度小于与第一网格的宽度的模块元素，则将该模块元素作为第三模块元素，将第三模块元素部分平移到第一网格中，然后在在网页页面中寻找大小等于第一网格剩余空间的大小的第五模块元素，将第五模块元素移动至第一网格剩余空间上。

图3为本发明实施例三提供的一种网页页面布局的调整装置的结构示意图，如图3所示，本实施例的装置包括：

网格划分模块31，用于根据预设的网格的大小，将网页页面划分为网格单元；

移动模块32，用于将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容；

网格调整模块33，用于若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素。

在上述技术方案的基础上，进一步地，所述网格调整模块33，具体用于：

若所述第一网格的大小大于所述目标网格的大小，则移动所述目标模块元素，以及与所述目标模块元素相邻的相邻模块元素，以使所述目标网格的大小与所述相邻模块元素所占用的网格大小之和满足所述第一网格的大小要求；

若所述第一网格的大小小于所述目标网格的大小，则移动所述目标模块元素，并确定所述第一网格的大小与所述目标网格的大小的差值；从网页页面上的其他模块元素中确定占用网格大小与所述差值大小相等的第二模块元素，并将所述第二模块元素移动至所述目标网格中，所述其他模块元素为除了所述目标模块元素和所述第一模块元素之外的模块元素。

在上述技术方案的基础上，进一步地，所述网格调整模块33，还用于：

若所述第一网格的大小与所述目标网格的大小一致，则移动所述目标模块元素至所述第一网格中。

在上述技术方案的基础上，进一步地，还包括：

匹配模块，用于若存在所占用网格大小与所述第一网格大小相互匹配的第三模块元素，则将所述第三模块元素移动至所述第一网格中。

本实施例的具体实现参照本发明实施例一提供的一种网页页面布局的调整方法，以及实施例二提供的一种网页页面布局的调整方法。本实施例通过根据预设的网格的大小，将网页页面划分为网格单元；将第一模块元素从第一网格移动至目标网格；若第一网格的大小大于目标网格的大小，则移动目标模块元素，以及与目标模块元素相邻的相邻模块元素，以使目标网格的大小与相邻模块元素所占用的网格大小之和满足第一网格的大小要求，从而在第一网格的大小大于目标网格的大小的时候，可以调整目标网格的大小，使得调整后的目标网格可以放置第一模块元素；若第一网格的大小小于目标网格的大小，则移动目标模块元素，并确定第一网格的大小与目标网格的大小的差值，从网页页面上的其他模块元素中确定占用网格大小与差值大小相等的第二模块元素，并将第二模块元素移动至目标网格中，从而使得在第一模块元素之前所在第一网格的大小小于目标模块元素所在目标网格的大小的时候，移动了目标模块元素，并且完全填充了目标网格；若第一网格的大小与目标网格的大小一致，则移动目标模块元素至第一网格中，实现了第一模块元素与目标模块元素互换的目的；并且将占用网格大小与第一网格大小相互匹配的第三模块元素，移动至第一网格中，实现了移动了第一模块元素之后，第一网格处不会产生空白。本实施例，实现了将第一模块元素移动至目标模块元素所在的目标网格处的时候，第一模块元素可以放置到目标网格上，模块元素之间不会产生相互重叠的现象，并且第一模块元素之前所在的第一网格不会产生空白；同时将网页页面上的模块元素的位置的变化展示给用户，便于用户改变网页页面的布局。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (4)

1.一种网页页面布局的调整方法，其特征在于，包括：

根据预设的网格的大小，将网页页面划分为网格单元；

将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容；

若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素；

其中，所述若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素，包括：

若所述第一网格的大小大于所述目标网格的大小，则移动所述目标模块元素，以及与所述目标模块元素相邻的相邻模块元素，以使所述目标网格的大小与所述相邻模块元素所占用的网格大小之和满足所述第一网格的大小要求；

若所述第一网格的大小小于所述目标网格的大小，则移动所述目标模块元素，并确定所述第一网格的大小与所述目标网格的大小的差值；

从网页页面上的其他模块元素中确定占用网格大小与所述差值大小相等的第二模块元素，并将所述第二模块元素移动至所述目标网格中，所述其他模块元素为除了所述目标模块元素和所述第一模块元素之外的模块元素；

所述方法还包括：

若所述第一网格的大小与所述目标网格的大小一致，则移动所述目标模块元素至所述第一网格中。

2.根据权利要求1所述的方法，其特征在于，所述调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素之后，还包括：

若存在所占用网格大小与所述第一网格大小相互匹配的第三模块元素，则将所述第三模块元素移动至所述第一网格中。

3.一种网页页面布局的调整装置，其特征在于，包括：

网格划分模块，用于根据预设的网格的大小，将网页页面划分为网格单元；

移动模块，用于将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容；

网格调整模块，用于若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素；

其中，所述网格调整模块，具体用于：

若所述第一网格的大小大于所述目标网格的大小，则移动所述目标模块元素，以及与所述目标模块元素相邻的相邻模块元素，以使所述目标网格的大小与所述相邻模块元素所占用的网格大小之和满足所述第一网格的大小要求；

若所述第一网格的大小小于所述目标网格的大小，则移动所述目标模块元素，并确定所述第一网格的大小与所述目标网格的大小的差值；从网页页面上的其他模块元素中确定占用网格大小与所述差值大小相等的第二模块元素，并将所述第二模块元素移动至所述目标网格中，所述其他模块元素为除了所述目标模块元素和所述第一模块元素之外的模块元素；

所述网格调整模块，还用于：

若所述第一网格的大小与所述目标网格的大小一致，则移动所述目标模块元素至所述第一网格中。

4.根据权利要求3所述的装置，其特征在于，还包括：

匹配模块，用于若存在所占用网格大小与所述第一网格大小相互匹配的第三模块元素，则将所述第三模块元素移动至所述第一网格中。