瀑布流布局与木桶布局

2017-09-20 本文已影响0人 _Dot912

在瀑布流布局中，每一个元素的宽度相同，高度不同，下图中的数字表示图片被添加的顺序，每次添加新的图片时，都将其放在高度最小的一栏，以保证每一栏的高度尽可能相近。

思路
假设我们将一组元素依次添加到某个容器中，每次添加的规则是这样：找到高度最低的列然后将当前元素插入到该列，若有几列的高度一样则从左往右排布；插入完成后更新该列的高度，按如此规则循环，直到所有元素添加到容器中。
通俗来说，我按顺序依次将元素渲染到页面，但它不一定按从左到右依次排列。

瀑布流布局

选定一个基准高度，依次将图片等比压缩至基准高度，然后水平排列，当空间不够放不下了，就将前面水平排列的一行图片等比拉伸至整体宽度刚好充满容器。
最终的结果是，每一行的高度不固定、图片数不同，但图片的总宽度是相同的。

木桶布局