flow_finish.js

/**
 * Метод принимает 
 * @param {array} row // массив картинок в ряду.
 * @param {HTMLElement} wrap // родитель картинок, наш компонент.
 **/ 
function flow(row, wrap) {
  const rowArray = Array.from(row);
  let aspect = 0;
  const horizontalPadding = 4;
  const maxHeight = 500;
  const length = row.length;
  
  // Собираем все картинки высчитываем соотношение сторон.
  const imagesArray = rowArray.map(image => {
    const imageWidth = image.naturalWidth;
    const imageHeight = image.naturalHeight;
    const imageAspect = imageWidth / imageHeight || 1;

    aspect = aspect + imageAspect;

    return {image, aspect: imageAspect};
  });

  // Высчитываем ширину ряда что-бы вычислить процентную ширину каждой картинки.
  const rowWidth = wrap.offsetWidth;
  // Высчитываем высоту ряда.
  let rowHeight = (rowWidth - horizontalPadding * length) / aspect;

  if ((rowHeight > maxHeight) && this.totalImages === 1) {
    rowHeight = maxHeight;
  }

  // Устанавливаем ширину каждой картинке в ряду.
  imagesArray.forEach(image => {
    image.image.parentElement.style.width = `${(rowHeight * image.aspect) * 100 / rowWidth}%`;
  });
  return imagesArray;
};