前言
最近一段时间由于项目需要接触到了ionic3,发现真是一个利器啊!ionic项目提供了一套丰富的图标库，在ionic3中也进行了升级。
公司的一个项目中由于要用到一个瀑布流的特效，找了半天竟然没有找到相关的资源，没有办法，只能迎着头皮上了~
话不多说，先上图
相信看过图片的同学都明白什么意思了吧。对，就是瀑布流！
但是今天我们的瀑布流可不是一般的瀑布流。让我们接着看:
自动排版
我们的要求是做那种随机凌乱的感觉，所以我们需要做一种机制,来将图片选择最优的一种排列方式来展示到页面上，也就是保证图片与相邻图片的比例是最合适的然后在实现排列.
angular4
相信这个效果如果在平常的jq插件中似乎也不难实现，确实，网上也能搜到一些jq的插件。但是我们的技术栈是angular4呀~
在ng中我们的DOM操作基本都是放在指令中的，相信用过angularjs1.x的同学并不陌生了吧~,在angular4中也是一样。
好了，让我们贴代码~
创建指令
我们假设你已经在你的ionic中建立好了相关的组件，并且已经拥有的图片数据，如果没有相关基础的同学建议大家先去看看ionic3 与 angular4的入门。
这是我的一个组件html的页面，也许眼尖的同学已经发现了我们的指令 [imagr-sort]="item",对的，我们的指令是需要你当前的图片的angular数据的。
创建一个指令ts
ionic g directive image-sort执行建立我们的指令。
创建完了我们的自定义指令就是这个样子，空空如也啊~
编写我们的逻辑
1.1接收并且注入一些东西: