Javascript 如何在'中排列图像；谷歌保留图片'；布局？

按照图像中的顺序排列动态图像内容。每一行都有基于图像尺寸的动态高度

正如我所理解的，Google Keep images布局中的每一行高度都基于行中图像的最低高度

行中的图像应该具有行的全部高度。如果仅CSS解决方案不可行，如何使用Javascript实现此布局

我能达到的最接近的布局是每行有一个固定的高度

标记：

{images？.map（（imageSrc，imageIndex）=>{return（
）；}）}

风格：

ul.images-container {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    height: 20vh;
    flex-grow: 1;
    img {
      max-height: 100%;
      min-width: 100%;
      object-fit: cover;
      vertical-align: bottom;
    }
  }
}

---

希望您至少尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您尝试过的内容。除了砖石布局外，还需要使用父元素裁剪部分图像，该父元素裁剪所有图像，使用

溢出：隐藏和
对象匹配：覆盖类似的东西？@ZohirSalak我也是这样尝试的。每行具有固定的高度。这是我不想要的。我想知道如何像Google keep的图片一样实现它。行高度应该是动态的。正如我所理解的，Google Keep布局中的每一行高度都是基于rowwow中图像的最低高度。我甚至看到了你的代码，并且完全瞥见了它。无论如何，行高等于最小的图像是不可能的，只要CSS如果这是你的目标，你允许使用JS吗？