简单的瀑布流

瀑布流的原理？

首先针对等宽不等高的子元素进行瀑布流布局，其中每一个子元素都是针对父容器进行绝对定位的，类似于第四象限中，每一个元素的left和top，都是由js来计算坐标，并且安排放置在页面上的；
看看效果图!

waterFall.gif

• 瀑布流的布局思路：

下一排的子元素都是来找上一排最短的一列进行排队；

• 子元素如何找到最短队列，并进行排队：

找最短的队列，那就必须有队列，这里将队列的个数转换成数组子元素的个数，将这个队列的长短转换成数组对应子元素的数值，找到最短的队列就可以转换成找到现在这个数组里面数值最小元素的下标，记为n；

• 绝对定位后，子元素的偏移值如何用JS获得：

在上一步中，找到了数值最小的元素的下标n，那么Y轴（top）上的偏移已经找到了，那么X轴（left）（决定入哪一个队列）就可以通过n*子元素的宽度（如果你设置了margin，请务必也加上margin的值）获得，然后让这个元素按照获得的坐标，放置到父容器中去；

• 为下一个元素的准备：

瀑布流一般有很多等宽不等高的元素，所以记得上一次操作后，更新这个数组里面下标为n的数值，也就是加上你排队的这个元素的高度（如果你设置了margin，请务必也机上margin值），更新最短队列的状态，以免出错。

实现代码