木桶布局的实现原理介绍

下面先解释一下什么叫木桶布局-关键词木桶，这是一个形象类比。

木桶

• 木桶每一竖条木条一般都是由一两个小块组成。
  

  下面再看一下木桶布局
  木桶布局
• 是不是很像一条条木板
  假设我们手里有20张照片，这些照片可以在保持宽高比的情况下进行放大或者缩小。选定一个基准高度比如200px
• 拿第1张照片，锁定宽高比高度压缩到200px，放到第一行
• 拿第2张照片，高度压缩到200px，放到第一行，图片1的后面
• ...
• 拿第5张照片，高度压缩到200px，放到第一行。oh，不好，空间不够，放不下了
• 把前面水平依次排放好的4个图片当成一个整体，等比拉伸，整体宽度正好撑满容器
• 第5张照片从下一行开始，继续...
  以上，就是木桶布局的原理。