简单拖拽布局客户端渲染-小结

背景：项目需要在管理端通过拖拽的方式对大屏页面进行布局，生成布局配置。然后在客户端根据布局配置进行渲染。

一、特殊需求

● 页面布局模块可能重合，这时需要定时切换，时间可配置
● 超出布局容器时，内容可滚动，包括横向和纵向，滚动周期可配置

二、大屏特性

自适应，随屏幕分辨率自适应改变大小
注：自适应页面不能使用px,结合使用vw、vh、%、em、rem

三、实现步骤

1. 布局容器实现
2. 内容超出滚动效果实现
3. 重合容器切换实现

四、具体技术思路

布局容器实现
采用绝对定位position：absolute ，此外用到left 、top 、width、height均使用%做单位。
注：容器之间的间隔：通过在内容与容器之间增加一个隔层，这个隔层的厚度即为容器与内容器的padding值，内容真正是放在内容器里面的。这样容易背景等样式的设置，在视觉上就感觉各容器之间是有间距的。
滚动效果实现
滚动效果采用动画和动态改变动画的时间属性，用到@keyframes、animation、transform、translateX、translateY、animation-duration
重合容器切换
首先将同位置容器分组，每组容器初始化z-index为0，然后定时改变每组容器的z-index

五、布局配置

配置文件主要有布局容器的位置和大小属性，可根据需要将布局设置的屏幕分成网格的虚拟形态，拖拽布局的最小变化单位即为单个网格的高或宽，生成的布局配置就是存放容器的网格数据。
在渲染时，就是根据容器的网格数据转换成相应的百分比。