我们创建了一个数组allImageArr=[];用于保存当前处理过的所有图片的数据。
还记的我们之前获得的angular的数据吧，我们通过循环它来将图片划分网格占用。
我们的循环中都做了些什么？
1.图片的宽高，并且求出每一张图片的比例。
2.将获得的图片比列与我们自己定义的网格比例进行区间划分。
3.按照我们划分的网格来计算出占有网格的图片的新的宽度，所占网格数储存并且记录保存到我们的自定义的allImageArr中，并且在原有的angular数据中添加gridding数字那个记录相应的网格数。
执行this.pictureColumnSort方法;
我们的图片已经划分完成了，接下来，我们来激情的一刻~
1.5图片排列，跟据网格派选最合适的邻居~
pictureColumnSort()!
上图
这一个过程其实也没啥好说的，主要就是循环，查看每个图片的网格数，将最合适的进行相邻排序(执行下一步:goExchange函数),最后匹配不上的单独做一个5分网格战术出来.
格式可以是多种:
3+2，1+4，1+1+3，1+3+1，2+3.。。。。。
怎么高兴怎么来~
没啥好说的就是循环筛选，大家看看图就好。
1.6无序变有序，除了交换应该没有更好的选择了吧
goExchange()! 上图
看看1.5中的代码，我们呢是在每次匹配到了合适的图片之后执行这个函数，因为我们需要把匹配到的图片换位置啊！
这个函数中接收到的repeatI与repeatA就是1.5中的双重循环的索引，这个索引决定了我们换图片的位置。
代码所示的原理就是将匹配到的图片换到我们当前图片的后面，将原来后面的图片补到换过来图片的位置，有点绕可能是我的比哦打能力不好，哈哈。
没啥好说的这个函数，就是换位置。
1.7取长补短，完工！
setHeight()!上图
再次循环(代码应该还有不少改进的地步，循环用的不少~);
这个地步已经我们呢的布局页面完成了，但是我们的图片的尺寸实际上是不规则的，不忍直视，