1.h和rowHeight的规律表：（其中h为配置数据中的h，不是像素高度）
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
展示页面组件的高度的计算：（根据不同的屏幕大小）
已知：rowHeight固定，配置页面元素高度Ph = p0， 配置页面的canvas高度： canvasHeight = ch0 ，展示页面的canvas高度：showCanvasHeight = ch1，配置属性h1
求：展示页面元素的配置属性h2
设，展示页面元素的高度NPH = p1
画布比例=ch1 ch0
组件比例=p1 p0
整个页面缩放比例应该一致，则
p1
p0
=
ch1ch0
则：
p1=
c
h
1
ch0*p0
根据上方的规律表
p0=
10 * h1 + rowHeight * h1 -10
则有
p1=
ch1ch0 * ( 10 * h1 + ( rowHeight * h1 ) -10 )
又 p1 = 10 * h2 + ( rowHeight * h2 ) -10
得
h2=
p1+1010 + rowHeight
=
ch1ch0 *[ 10 * h1 + ( rowHeight * h1 ) -10 ]
+1010+rowHeight
2.配置属性w（所占的列的数量）、canvasWidth（配置canvas宽度）、cols（列的总数）、元素实际宽度p的关系
当cols可以整除w时：
p=
[ canvasWidth-10 *
clos
w
+1
]
colsw
当cols不可以整除w时：
p=
[ canvasWidth-10 *
clos
w
的值取整
+2 –
]clos
w的值取整
其中
（非次方运算）的意思为，所剩下的不足的列宽所能容纳的最大的列宽的宽度。
例如：w = 4, canvasWidth = 900, cols = 15 时
可以容纳w=4的组件的数量为 15 ÷ 4 = 3 …… 3
则
则为w = 4, canvasWidth = 900, cols = 15 时w=3的组件的宽度
据此，可求组件的minW 和 minH，来限制用户的组件不可过小，避免在配置页面组件收缩的过小时，react-grid-layout的属性还可缩放，但是组件无法继续缩小，溢出缩放框。
3. 当添加新组件时，如果希望组件横向添加到某行的最后面，则需要计算组件的x值，y值默认，则可以实现当某行加满时，则加到下一行上；若不设置则默认在纵向添加新元素，但画布的高会自适应组件的高度，会导致即使右边有空缺也一直加载在最下面
配置属性中的x的计算：不是组件的左右排序，x的值与该行所有元素的w总和以及cols相关。
当在y=0这一行添加新元素时
初始化：假设配置数组为configLIst, countX为属性w的累加，当countX > cols时，countX等于当前w值再继续累加，直到结束。
添加新元素时：countX = countX + 新元素的w < cols ? countX + 新元素的w : 0