react-grid-layout中w、h、x的计算

1.h和rowHeight的规律表：（其中h为配置数据中的h，不是像素高度）

h\rowHeight	1	2	3	4	5	……	n
1	2	2	3	4	5	……	n（除rowHei=1外）
2	12	14	16	18	20	……	2n+10
3	23	26	29	32	35	……	3n+20
4	34	38	42	46	50	……	4n+30
5	45	50	55	60	65	……	5n+40
……	……	……	……	……	……	……	……
m	11m-10(除h=1外)	12m-10	13m-10	14m-10	15m-10	……	10m+nm-10

展示页面组件的高度的计算：（根据不同的屏幕大小）

已知：rowHeight固定，配置页面元素高度Ph = p0， 配置页面的canvas高度： canvasHeight = ch0 ，展示页面的canvas高度：showCanvasHeight = ch1，配置属性h1

求：展示页面元素的配置属性h2

设，展示页面元素的高度NPH = p1
画布比例=ch1 ch0

组件比例=p1 p0

       整个页面缩放比例应该一致，则      
p1p0=ch1ch0

         则：

p1=ch1ch0*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 * closw+1  ]colsw

       当cols不可以整除w时：

p=[ canvasWidth-10 * closw的值取整+2 - ]closw的值取整

其中（非次方运算）的意思为，所剩下的不足的列宽所能容纳的最大的列宽的宽度。

例如：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