【技术实现步骤摘要】
页面布局方法、装置、设备及介质
[0001]本申请涉及计算机
，尤其涉及一种页面布局方法、装置、设备及介质。
技术介绍
[0002]页面布局是数据可视化搭建过程中的重要一环。便捷的布局操作可以帮助用户快速搭建出数据报表页面，而且通过布局可以将相关联的页面元素排列在一起，方便用户更加集中地获取数据信息。
[0003]目前，用户有着数据报表页面的多端浏览需求，比如，用户需要在手机和电脑上浏览数据报表页面。不同设备的显示屏幕大小不同，同一页面在不同设备上往往需要采用不同的页面布局。一种布局方式是，前端开发人员提前准备好适用于不同端的页面布局，这需要消耗大量的时间；另一种布局方式是，采用自动布局方法，基于一端的页面布局快速生成其他端的页面布局。
[0004]传统的用于自动布局的多端适配方法主要是按照元素顺序对页面上的每个元素进行裁剪，然而，该方案下，宽屏布局下关联的页面元素在窄屏布局中的位置关系会发生较大变化，导致用户无法通过窄屏中页面元素的位置关系感知到页面元素之间的关联，进而导致用户在窄屏下的页面浏览体验不...
【技术保护点】
【技术特征摘要】
1.一种页面布局方法，其特征在于，包括：获取目标页面的原始布局数据，所述原始布局数据包括所述目标页面上多个页面元素的位置和尺寸；根据所述原始布局数据，确定所述目标页面的多个页面区域，同一页面区域中的页面元素为相关联的页面元素；根据用于展示所述目标页面的显示窗口、所述多个页面区域和所述原始布局数据，确定适合所述显示窗口的目标布局数据；根据所述目标布局数据，在所述显示窗口对所述目标页面进行显示。2.根据权利要求1所述的页面布局方法，其特征在于，所述页面区域包括行区域和/或列区域，所述根据所述原始布局数据，确定所述目标页面的多个页面区域，包括：基于所述原始布局数据，对所述目标页面进行行分割和/或列分割，得到所述行区域和/或所述列区域。3.根据权利要求2所述的页面布局方法，其特征在于，所述目标页面的分割次数大于或等于1，所述目标页面的一次分割过程包括：确定第N次待分割的目标区域，所述目标区域包含多个页面元素；根据所述原始布局数据，确定所述目标区域中页面元素的位置顺序、所述目标区域中页面元素的位置以及所述目标区域中页面元素的尺寸；根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割和/或列分割，得到所述目标区域中的行区域和/或列区域。4.根据权利要求3所述的页面布局方法，其特征在于，所述根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割和/或列分割，得到所述目标区域中的行区域和/或列区域，包括：根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割，得到第一区域，所述第一区域为所述目标区域中的行区域；如果所述第一区域包含多个页面元素，则根据所述第一区域中页面元素的位置顺序、位置和尺寸，对所述第一区域进行列分割，得到第二区域，所述第二区域为所述目标区域中的列区域。5.根据权利要求4所述的页面布局方法，其特征在于，所述页面元素的位置包括所述页面元素的行位置，所述页面元素的尺寸包括所述页面元素的高度，所述第一区域为一个或多个，所述根据所述目标区域中页面元素的位置顺序、位置和尺寸，对所述目标区域进行行分割，得到第一区域，包括：基于所述目标区域中页面元素的位置顺序，确定所述目标区域中待划分的第M个页面元素；在M等于1的情况下，根据所述第M个页面元素的行位置、所述第M个页面元素的高度和所述目标区域，确定所述目标区域中第一个行区域，所述第一个行区域包裹所述第M个页面元素；在M大于1的情况下，根据所述第M个页面元素的行位置，确定所述第M个页面元素与目标行区域是否存在行关联关系，所述目标行区域包括在第N次分割中得到的包裹所述目标区域中第M
‑
1个页面元素的行区域；
如果所述第M个页面元素与所述目标行区域存在行关联关系，则更新所述目标行区域，更新后的目标行区域包裹所述第M个页面元素，否则根据所述第M个页面元素的行位置、所述第M个页面元素的高度和所述目标区域，确定下一个行区域，所述下一个行区域包裹所述第M个页面元素。6.根据权利要求4所述的页面布局方法，其特征在于，所述页面元素的位置包括所述页面元素的列位置，所述页面元素的尺寸包括所述页面元素的宽度，所述第二区域为一个或多个，所述如果所述第一区域包含多个页面元素，则根据所述第一区域中页面元素的位置顺序、位置和尺寸，对所述第一区域进行列分割，得到第二区域，包括：如果所述第一区域包含多个页面元素，则基于所述第一区域中页面元素的...
【专利技术属性】
技术研发人员：张有明，李彪，
申请(专利权)人：阿里巴巴中国有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。