木桶布局的实现原理介绍

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

木桶

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

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

你可能感兴趣的:(木桶布局的实现原理介绍)