看图！
既然我们在模板中有输入([[imagr-sort]="item"]);那么我们也当然应该在指令中接收到输入的数据；如截图中红色箭头所示，我将输入的数据保存了起来->sourceArr;
然后我们在angular4中如果要获取到dom宿主的一些属性了，元素了等等就要用到ElementRef，Renderer2是angular4中的一个类似渲染器的东西吧，这个具体的我还没有搞懂，大家可以多看看这块的资料，我主要是在这个指令中用于更改Dom的一些结构。
关于我们的imgLength ，我待会再说
1.2实际点！图片是从异步加载过来的！
我们首先思考这样一个问题：
我们的指令是在angular数据渲染的时候就开始执行的，这个是基本大家都懂。
but！我们的图片可都是异步加载的呢~，所以自然而然我们要有一个图片加载的过程:
嗯，相信各位早就想到了---->image.onload,不错，是它~
也是时候说下之前的imgLength了，这个变量来记录记载完成的图片的数量，用来辨别是否当前图片都已经加载完毕了，为我们后续的动作做依据。
image.onerror,这个相信大家也看明白了吧，这个是图片加载失败的一个函数，我在里面做的操作是将加载失败的图片从原始的DOM中，angular的数据剔除。
这里面就用到了我们angular的渲染器this.render2();
相关功能方法大家可以去源码里面看一下，基本上所有常用的Dom操作都有实现。
for循环呢是因为我们的图片数据是多条的，所以我们要等待每一张图片都顺利的加载完成。
ps:注意在onerror与onload的函数中使用this要在imgOnlod中使用变量引用let _self = this;
图片加载完成开始我们的改造工程
1.3将我们的适口按照网格划分
imageStartStort()！
上图
大家看1图红圈内，我是自己划分出五个横向网格标准，便于我们待会将图片比例做对比。
1.4将我们的图片定义网格占用
