如何实现固定宽高父节点，动态子节点添加自适应大小

首先看下效果：
初始基础效果

其中看板里面的数据是动态新增的，通过加号按钮添加不同的div，这样的话就存在一个整体div的添加过程，看板就多一个模块，看看多几个模块的效果：
多个div效果

很多个div效果

效果也看了，就不怀疑我在吹牛逼哈，下面介绍一下这个实现的过程：

1：首先获取父节点的相对的宽高大小

获取方法：var fuwidth = $(父节点).width() 和var fuheight = $(父节点).height()

2：获取子div的个数和横排放多少个

这个我用的是json数组假数据测试的，可以直接获取json数组的length属性既可。下面我这样定义一个变量:
var jsonlength = jsonData.length
然后计算横排个数：可以通过求平方数来向上取整。
var collen = Math.ceil(Math.sqrt(jsonlength ));
计算综排的个数：通过总个数除于横排个数来向上取整
var rowlen = Math.ceil(jsonlength / collen);

3：计算有关子div的宽高和边距

计算每个子div的宽高
子宽整体（总宽/横排个数）：var perwidth = fuwidth / collen ;
子实际宽度：perwidth0.8 子左右边距：perwidth0.1
子高整体（总宽/横排个数）：var perheight = fuwidth / rowlen ;
子实际宽度：perheight0.8 子左右边距：perheight0.1

4:子div渲染+样式调整

然后遍历拼接子div到父节点上，然后就是针对子节点通过document.css()设置宽高和内外边距.这样的话你还可以通过不同属性值设置div的不同颜色背景。

注：其中里面的字体也可以自适应的哈，我才用的是比例对除的方式，不熟悉的可以留言

最后就讲到这里拉，也是看了网上好多滥竽充数的文章才特此总结，不喜勿喷，喜着请留言夸我一下或者求个关注，万分感谢！