Учитывая набор изображений со случайными размерами, я пытаюсь отобразить их в строках, чтобы каждая строка занимала 100% ширины контейнера, а расстояние между каждым изображением было примерно одинаковым. Поскольку я не знаю размеров заранее, я также не знаю, сколько изображений окажется в подряд. Прямо сейчас я использую контейнер с гибким переносом, а внутри контейнера находится список упаковщиков изображений с установленной высотой и максимальной шириной (поэтому очень широкие изображения обрезаются). Сами изображения имеют высоту: 100% и ширину: авто. Затем у меня есть функция изменения размера, которая использует значения вершины смещения, чтобы выяснить, какие изображения находятся в строке, и масштабирует их на основе коэффициента, рассчитанного из суммы ширин изображений в этой строке.
Это работает, но не очень хорошо - во-первых, я выполняю функцию изменения размера по тайм-ауту, потому что если я не сделаю это, она попытается изменить размер до того, как все изображения будут загружены, что вызывает проблемы. Кроме того, фактор не идеален, поэтому я получаю слегка зазубренные края на правой стороне контейнера. Я могу сделать изменение размера дважды, и это дает результаты, которые достаточно близки, но это кажется глупым. Я знаю, что могу дать контейнеру justify-content: space -ween, чтобы позаботиться о зубчатых краях слева и справа от контейнера, но было бы неплохо просто сделать это правильно (а различия в интервалах немного раздражают) , Последняя проблема - если размер окна после загрузки изменяется, вся сетка испорчена. Я думаю, я мог бы решить это с помощью setInterval для функции изменения размера, но это кажется грязным (и это уже грязное решение).
( Edit : я попытался использовать setInterval, и это дает хорошие результаты для всего, кроме проблемы изменения размера окна, потому что как только вы сузите окно достаточно, чтобы сгибать оболочку по-разному, изменение размера окна обратно никогда не позволит вещам переноситься так, как раньше.)
Is есть лучшее решение? Тайм-аут и изменение размера окна являются основными проблемами. В идеале я хотел бы получить что-то вроде страницы результатов Google Image или первой страницы DeviantArt. Я в порядке с использованием другого каркаса сетки, пока он делает то, что мне нужно. Вот мой код (я использую Bootstrap, поэтому часть форматирования находится в HTML классах):
HTML / ERB:
<div class="img-grid d-flex flex-wrap m-n1">
<% images = create_placeholder_array %>
<% images.each do |img| %>
<%= link_to(img[:url],
class: 'img-wrapper position-relative m-1') do %>
<%= image_tag(img[:url], class: 'grid-img-wide', height: img[:height], width: img[:width]) %>
<% end %>
<% end %>
</div>
(хелпер create_placeholder_array просто создает массив URL для placeholder.com для изображений со случайным размером.)
CSS:
.img-wrapper {
max-width: 320px;
min-width: 100px;
height: 200px;
overflow: hidden;
}
.grid-img-wide {
height: 100%;
width: auto;
}
JavaScript / JQuery:
document.addEventListener("turbolinks:load", function () {
imagesPerRow = 0
widthPerRow = 0
currOffset = $('.img-wrapper').offset().top
setTimeout(function() {
$('.img-wrapper').each(function(i) {
if (currOffset == $(this).offset().top) {
imagesPerRow++;
widthPerRow += $(this).outerWidth(true);
} else {
factor = $('.img-grid').innerWidth() / widthPerRow;
console.log('factor: ' + factor);
$('.img-wrapper').slice(i - imagesPerRow, i).each(function() {
$(this).css('height', $(this).innerHeight() * factor + 'px');
$(this).css('max-width', $(this).innerWidth() * factor + 'px');
})
currOffset = $(this).offset().top;
imagesPerRow = 1;
widthPerRow = $(this).outerWidth(true);
}
});
}, 1000)
});
Спасибо за вашу помощь!