Рассчитать количество изображений в строке, чтобы уместить контейнер при сохранении соотношения сторон - PullRequest
Новая
       38

Рассчитать количество изображений в строке, чтобы уместить контейнер при сохранении соотношения сторон

0 голосов
/ 09 января 2020

Я хочу создать горизонтальный макет кладки, как эта библиотека . Он содержит коллекцию изображений с различной высотой и шириной друг от друга.

Макет может иметь одну или несколько строк, если он соответствует этому критерию:

  • Ширина строки соответствует размеру ширина кладочного контейнера
  • Строка может иметь разную высоту друг друга
  • Строка имеет ограничение минимального и максимального значения высоты

Строка может иметь один или несколько столбцов (изображение ), при условии, что он соответствует этим критериям:

  • Изображение сохраняет свое соотношение сторон
  • Изображение в одной строке должно быть одинаковой высоты. Имеет фиксированную ширину зазора для каждого изображения

Вот иллюстрация:

enter image description here

Вот более реальный пример вкладки Canva images:

enter image description here

Я начинаю кодировать это, используя JavaScript (React Hook), но я застрял с логикой c.

Представьте, что есть много изображений с разными размерами, которые имеют стиль отображения в виде встроенных блоков. Мои текущие логи c для этого случая:

  • Получить ширину и высоту изображений для сохранения соотношения сторон Изменить изображения
  • высота с минимальным значением высоты строки, сохраняя соотношение сторон
  • Теперь все изображения имеют одинаковую высоту, но ширина строки не соответствует контейнеру
  • А потом я застрял на этой

части о текущем прогрессе 

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>
  );
}

Я не могу понять, как строка может соответствовать размеру контейнера и как строка может рассчитать количество изображений, чтобы соответствовать минимальной или максимальной высоте строки.

Пожалуйста, помогите мне, спасибо заранее.

...