浅谈瀑布流

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。

瀑布流布局效果

即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
那么规则是什么呢？
下面通过图解来分析一下瀑布流的算法。

图解瀑布流算法

当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。

那么第六张图片，放置在什么位置呢？是下图的位置么？

我们通过瀑布流算法实验得到，后面紧跟的第六张图片的位置应该是这个位置。

为什么呢？
因为放置它之前，这一列的高度为所有列中最小ÿ