創建縮放到容器寬度的 100% 的未知大小圖像行

Question

給定一組具有隨機尺寸的圖像，我試圖將它們按行顯示，以便每一行占據容器寬度的 100%，並且每個圖像之間的空間大致相同。 因為我事先不知道尺寸，所以我也不知道連續會出現多少張圖像。 現在，我正在使用一個帶有 flex wrap 的容器，容器內部是一個圖像包裝列表，具有設置的高度和最大寬度（因此裁剪了非常寬的圖像）。 圖像本身具有高度：100% 和寬度：自動。 然后我有一個調整大小的函數，它使用偏移量最高值來確定哪些圖像在一行中，並根據從該行中圖像的寬度總和計算出的因子將它們放大。

它有點工作，但不是很好 - 一方面，我正在超時執行調整大小功能，因為如果我不這樣做，它會在圖像全部加載之前嘗試調整大小，這會導致問題。 此外，這個因素並不完美，所以我最終在容器的右側出現了略微鋸齒狀的邊緣。 我可以進行兩次調整大小，這會得到足夠接近的結果，但這似乎很愚蠢。 我知道我可以給容器 justify-content: space-between 處理容器左側和右側的鋸齒狀邊緣，但只要把它弄對就好了（間距的差異有點煩人） . 最后一個問題是如果窗口在加載后調整大小，整個網格就會混亂。 我想我可以在調整大小函數上使用 setInterval 來解決這個問題，但這看起來很混亂（這已經是一個混亂的解決方案）。

（編輯：我嘗試使用 setInterval，它為除窗口大小調整問題之外的所有內容提供了更好的結果，因為一旦您將窗口縮小到足以導致 flex 以不同方式包裹，調整窗口大小將永遠不會允許事物以它們的方式包裹以前做過。）

有更好的解決方案嗎？ 超時和窗口大小調整是主要問題。 理想情況下，我最終會得到類似於 Google 圖片結果頁面或 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 助手只是為隨機大小的圖像制作一個指向 placeholder.com 的 URL 數組。）

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

謝謝你的幫助！

Answer 1

您是否嘗試將事件偵聽器的 javascript 引用從文檔更改為窗口？

請參閱this以了解差異。

window.addEventListener("load", function () {
    ...
}