连续计算数字图像以适合容器，同时保持宽高比

Question

我想创建一个library这样的砌体水平布局。它包含高度和宽度互不相同的图像集合。

只要符合以下条件，版式就可以包含一行或多行：

• 行宽适合砌体容器的宽度
• 行之间可以有不同的高度
• 行有限制的最小和最大高度值

一行可以具有一个或多个列（图像），只要它满足以下条件：

• 图像保持其长宽比
• 同一行中的图像必须具有相同的高度 每个图像的间隙宽度固定不变

这里是插图：

以下是“ Canva图片”标签的更真实示例：

我开始使用JavaScript（React Hook）对此进行编码，但是我坚持逻辑。

想象一下，许多具有不同尺寸的图像具有嵌入式块显示样式。对于这种情况，我目前的逻辑是：

• 获取图像的宽度和高度以保持宽高比修改图像
• 具有最小行高值的高度，同时保持宽高比
• 现在所有图像都具有相同的高度，但行宽不适合容器
• 然后我就被困住了

当前进度的一部分

function Masonry({ minHeight, children }) {
  const _originalDimension = [];
  const _tempDimension = [];

  children.forEach(({ props: { height, width } }) => {
    const newWidth = (width / height) * minHeight;
    const newHeight = minHeight;

    _originalDimension.push({ height, width });
    _tempDimension.push({ height: newHeight, width: newWidth });
  });

  const { container } = useStyles();
  return (
    <div className={container}>
      {children.map((child, i) =>
        cloneElement(child, { key: i, ..._tempDimension[i] })
      )}
    </div>
  );
}

我无法确定行如何适合容器宽度以及行如何计算图像数量以适合最小或最大行高。

请帮助我，谢谢。