网页页面布局的调整方法及装置的制造方法
【技术领域】
[0001]本发明涉及网页技术，尤其涉及一种网页页面布局的调整方法及装置。
【背景技术】
[0002]所有的网站都需要定义其网页的外观，即进行网页页面布局。在网页页面上，将需要显示的内容放入模块元素中，从而进行网页页面布局的时候，可以更改网页中各个模块对象的位置、大小。
[0003]现有技术中，进行网页页面布局的过程中，终端通过改变当前模块元素在网页页面上的位置，来实现对网页页面的布局。
[0004]但是，现有技术中，将模块元素移动到目标位置的时候，当前模块元素会与目标位置处的模块元素相互重叠，阻碍了目标位置处的模块元素的内容的展示。从而造成模块元素之间相互重叠的现象，不利于网页上模块元素的内容的展示。
【发明内容】
[0005]本发明提供一种网页页面布局的调整方法及装置，用以解决现有技术中的在将模块元素移动到目标位置的时候，当前模块元素会与目标位置处的模块元素相互重叠，而不利于网页上模块元素的内容的展示的问题。
[0006]本发明的第一个方面是提供一种网页页面布局的调整方法，包括:
[0007]根据预设的网格的大小，将网页页面划分为网格单元；
[0008]将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容；若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素。
[0009]本发明的另一个方面是提供一种网页页面布局的调整装置，包括:
[0010]网格划分模块，用于根据预设的网格的大小，将网页页面划分为网格单元；
[0011]移动模块，用于将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容；
[0012]网格调整模块，用于若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素。
[0013]本发明通过根据预设的网格的大小，将网页页面划分为网格单元；然后将第一模块元素从第一网格移动至目标网格，第一网格包括至少一个网格单元，第一模块元素用于承载第一网格上的数据内容；若第一网格的大小与目标网格的大小不一致，则移动目标网格对应的目标模块元素，并调整目标网格所占用网格单元的个数，以放置第一模块元素。实现了将当前需要移动的第一模块元素放置到目标模块元素所在的目标网格处的时候，而第一模块元素与目标模块元素的大小不一致，第一模块元素不会与目标模块元素产生重叠，不妨碍网页上模块元素的内容的展示。
【附图说明】
[0014]图1为本发明实施例一提供的一种网页页面布局的调整方法的流程图；
[0015]图2为本发明实施例二提供的一种网页页面布局的调整方法的流程图；
[0016]图3为本发明实施例三提供的一种网页页面布局的调整装置的结构示意图。
【具体实施方式】
[0017]为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0018]图1为本发明实施例一提供的一种网页页面布局的调整方法的流程图，如图1所示，本实施例的方法包括:
[0019]步骤101、根据预设的网格的大小，将网页页面划分为网格单元。
[0020]在本实施例中，具体的，网页页面上有多个不同大小的模块元素，每个模块元素上承载了需要在网页页面上显示的内容，比如一个模块元素上承载了文字，或者承载了一张图片。首先，根据预先设定的网格的大小，将当前的网页页面划分为多个网格单元。具体的划分过程为:获取网页页面上的所有模块元素的左上角的点的坐标值，以及所有模块元素的右下角的点的坐标值；计算所有点的水平坐标值中的距离最小值，为第一计算值；计算所有点的垂直坐标值中的距离最小值，为第二计算值；然后，计算第一计算值和第二计算值中最小的值为第三计算值，若第三计算值是其他所有坐标值的距离值的整数倍，则将第三计算值作为一个网格单元的边长，将网页页面划分为等大小的多个网格单元，网格单元为正方形；若第三计算值不是其他所有坐标值的距离值的整数倍，则将第三计算值除以一个素数之后得到第四计算值，若第四计算值是其他所有坐标值的距离值的整数倍，则将第四计算值作为一个网格单元的边长，将网页页面划分为等大小的多个网格单元，网格单元为正方形；若第四计算值不是其他所有坐标值的距离值的整数倍，则将第三计算值除以另外一个素数，直至得到的第四计算值是其他所有坐标值的距离值的整数倍。
[0021]步骤102、将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容。
[0022]在本实施例中，具体的,第一模块兀素位于第一网格上,第一网格包括了至少一个网格单元，第一模块元素上承载了需要在第一网格的位置处显示的数据内容，将第一模块元素从第一网格移动到目标网格上。
[0023]步骤103、若所述第一网格的大小与所述目标网格的大小不一致，则移动所述目标网格对应的目标模块元素，并调整所述目标网格所占用网格单元的个数，以放置所述第一模块元素。
[0024]当第一模块元素的中心点进入目标网格的时候，由于第一模块元素上承载了需要在第一网格的位置处显示的数据内容，并且，目标网格上的目标模块元素上承载了需要在目标网格位置处显示的数据内容，此时，第一模块元素上的数据内容会与目标模块元素上的数据内容产生重叠，从而第一模块元素上的数据内容挡住了目标模块元素上的数据内容的展示，需要移动目标网格对应的目标模块元素；由于第一网格的大小与目标网格的大小不一致，则调整目标网格所占用的网格单元的个数，使得调整后的目标网格的大小适应第一模块兀素的大小，以放置第一模块兀素。
[0025]本实施例通过根据预设的网格的大小，将网页页面划分为网格单元；将第一模块元素从第一网格移动至目标网格之后，若第一网格的大小与目标网格的大小不一致，则移动目标网格对应的目标模块元素，使得第一模块元素上的数据内容不会挡住了目标模块元素上的数据内容的展示；并调整目标网格所占用网格单元的个数，以放置第一模块元素，使得第一模块元素被移动到合适的位置处。从而实现了移动模块元素之后，模块元素之间不会产生重叠，不妨碍网页上模块元素的内容的展示。
[0026]图2为本发明实施例二提供的一种网页页面布局的调整方法的流程图，如图2所示，本实施例的方法包括:
[0027]步骤201、根据预设的网格的大小，将网页页面划分为网格单元。
[0028]步骤202、将第一模块元素从第一网格移动至目标网格，所述第一网格包括至少一个所述网格单元，所述第一模块元素用于承载所述第一网格上的数据内容。
[0029]步骤203、若所述第一网格的大小大于所述目标网格的大小，则移动所述目标模块元素，以及与所述目标模块元素相邻的相邻模块元素，以使所述目标网格的大小与所述相邻模块元素所占用的网格大小之和满足所述第一网格的大小要求。
[0030]在本实施例中，具体的，若第一模块兀素之前所在第一网格的