一种基于栅格的自适应布局方法与系统的制作方法
【技术领域】
[0001]本发明涉及界面设计领域，特别是涉及一种基于栅格的自适应布局方法及系统。
【背景技术】
[0002]传统的界面布局方法是根据div层叠样式表中的定位技术一层一层控制。
[0003]显示的一个新的页面，需要设计者事先设计好界面上每一模块的宽度和高度，界面编写好后，便无法移动界面上的模块。而且，通过div编写出来的页面，其样式也为设计者制定的。无法再根据个人喜好及习惯进行界面布局的调整，用户体验较差。
【发明内容】
[0004]有鉴于此，本发明的主要目的在于提供一种基于栅格的自适应布局方法与系统，可以根据需求自适应地调整界面布局。
[0005]为实现上述目的，本发明提供了一种基于栅格的自适应布局方法，应用于栅格系统，所述方法包括:
[0006]响应用户的拖动指令将第一目标模块从第一界面位置移动至第二界面位置；
[0007]在所述第一目标模块移动前所占用的界面处填充空白占位符；
[0008]确定所述第一目标模块所占用的第一界面尺寸信息；
[0009]检测所述第一界面位置以下的界面上，是否存在小于或等于第一界面尺寸的第二目标模块，如果有则将所述第二目标模块移动至第一界面位置，并将所述空白占位符移除；
[0010]当所述第二目标模块的尺寸小于第一界面尺寸时，将所述第二目标模块所在界面位置以下的各模块同时上移，占用所述第二目标模块所在界面以下相邻的空白界面。
[0011]优选地，所述拖动指令包括鼠标按下指令，鼠标拖动指令以及鼠标松开指令。
[0012]优选地，响应用户的拖动指令将第一目标模块从第一界面位置移动至第二界面位置包括:
[0013]根据所述鼠标按下指令确定所述第一界面位置坐标，根据所述鼠标拖动指令确定从所述第一界面位置到所述第二界面位置的移动路径，根据所述鼠标松开指令确定所述第二界面位置坐标，将所述第一目标模块从所述第一界面位置坐标处沿所述移动路径移动到所述第二界面位置坐标处。
[0014]优选地，所述方法还包括:
[0015]所述第一界面位置以下的界面上，不存在小于或等于第一界面尺寸的模块时，将所述第一界面位置以下的各模块同时上移，占用所述第一目标模块移动前所占用的界面位置，并将所述空白占位符移除。
[0016]优选地，所述第一界面尺寸信息为所述第一目标模块水平方向占用的栅格数，以及竖直方向上占用的栅格数。
[0017]本发明还提供了一种基于栅格的自适应布局系统，应用于栅格系统，所述系统包括拖动模块和排序模块；
[0018]所述拖动模块用于响应用户的拖动指令将第一目标模块从第一界面位置移动至第二界面位置；
[0019]所述排序模块用于在所述第一目标模块移动前所占用的界面处填充空白占位符；确定所述第一目标模块所占用的第一界面尺寸信息，检测所述第一界面位置以下的界面上，是否存在小于或等于第一界面尺寸的第二目标模块，如果有则将所述第二目标模块移动至第一界面位置，并将所述空白占位符移除；当所述第二目标模块的尺寸小于第一界面尺寸时，将所述第二目标模块所在界面位置以下的各模块同时上移，占用所述第二目标模块所在界面以下相邻的空白界面。
[0020]优选地，所述拖动指令包括鼠标按下指令，鼠标拖动指令以及鼠标松开指令。
[0021]优选地，所述第一界面尺寸信息为所述第一目标模块水平方向占用的栅格数，以及竖直方向上占用的栅格数。
[0022]应用本发明提供的一种基于栅格的自适应布局方法与系统，应用于栅格系统，响应用户的拖动指令将第一目标模块从第一界面位置移动至第二界面位置；在所述第一目标模块移动前所占用的界面处填充空白占位符；确定所述第一目标模块所占用的第一界面尺寸信息；检测所述第一界面位置以下的界面上，是否存在小于或等于第一界面尺寸的第二目标模块，如果有则将所述第二目标模块移动至第一界面位置，并将所述空白占位符移除；当所述第二目标模块的尺寸小于第一界面尺寸时，将所述第二目标模块所在界面位置以下的各模块同时上移，占用所述第二目标模块所在界面以下相邻的空白界面。当将一模块拖动至其他位置时，出现界面空白的位置可由尺寸不大于该模块的其他模块占用，并将此界面位置以下模块自适应地上移，填充移动模块后出现的界面空白，可以根据需求自适应地调整界面布局。
【附图说明】
[0023]为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
[0024]图1为本发明一种基于栅格的自适应布局方法实施例一的流程图；
[0025]图2为本发明一种基于栅格的自适应布局方法实施例二的流程图；
[0026]图3为本发明一种基于栅格的自适应布局系统实施例三的结构示意图。
【具体实施方式】
[0027]下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0028]实施例一:
[0029]本发明提供了一种基于栅格的自适应布局方法，应用于栅格系统，栅格系统为将界面平均分为若干栅格尺寸，如12列的栅格系统，在界面设计时，先将界面拆分成12列，其结构有以下几种选择:左右以1:3的结构、左中右以1:3:1的结构、上下结构，无论其结构如何，都可以通过12列组合出来，如拆分成3列和9列，其中3列为左侧模块，可展示页面的分类信息，右侧9列为展示模块，可展示左侧分类中的详细内容。栅格系统使界面变得规则和有序，不必通过指定每一个div宽度的方式，而是通过设置其占多少列来定义宽度。在屏幕尺寸发生变化时，界面可根据浏览器窗口的栅格尺寸自适应地显示在新尺寸的屏幕上，所占栅格数不变，避免了固定宽度的界面导致无法自适应屏幕尺寸的问题。
[0030]图1示出了本发明一种基于栅格的自适应布局方法实施例一的流程图，所述方法包括:
[0031]步骤SlOl:响应用户的拖动指令将第一目标模块从第一界面位置移动至第二界面位置；
[0032]如用户根据自己的喜好或习惯需要将位于界面上方的某一模块移到界面下方，可通过鼠标拖动实现，所述拖动指令包括鼠标按下指令，鼠标拖动指令以及鼠标松开指令。根据所述鼠标按下指令确定所述第一界面位置坐标，根据所述鼠标拖动指令确定从所述第一界面位置到所述第二界面位置的移动路径，根据所述鼠标松开指令确定所述第二界面位置坐标，将所述第一目标模块从所述第一界面位置坐标处沿所述移动路径移动到所述第二界面位置坐标处。终点坐标通过鼠标事件mouseup来确定，起点坐标通过鼠标事件mousedown来确定，在鼠标的移动过程中，需要通过样式来显示被拖动栅格的移动痕迹，被拖动栅格的移动过程通过mousemove来控制。
[0033]步骤S102:在所述第一目标模块移动前所占用的界面处填充空白占位符；
[0034]模块移动走后该位置出现界面空白，先使用空白占位符填充该位置。
[0035]步骤S103:确定所述第一目标模块所占用的第一界面尺寸信息；
[0036]确定第一目标模块的尺寸信息，包括第一目标模块水平方向占用的栅格数，以及竖直方向上占用的栅格数，本方法中的尺寸信息均以栅格数进行计量。
[0037]步骤S104:检测所述第一界面位置以下的界面上，是否存在小于或等于第一界面尺寸的第二目标模块，如果有则进入步骤S105 ;
[0038]步骤S105:将所述第二目标模块移动至第一界面位置，并将所述空白占位符移除；
[0039]当出现空白的界面以下存在尺寸小于或等于第一目标模块的模块时，将其移入该空白位置，并将空白占位符移除。
[0040]步骤S106:当所述第二目标模块的尺寸小于第一界面尺寸时，将所述第二目标模块所在界面位置以下的各模块同时上移，占用所述第二目标模块所在界面以下相邻的空白界面。
[0041]当第二目标模块移入之前的空白界面时，若第二目标模块尺寸与第一目标模块尺寸相同则不会出现空白的界面，当第二目标模块的尺寸小于第