使用Flexbox實現(xiàn)自適應(yīng)照片布局，輕量級且高效！本文介紹一種輕量級方法，利用Flexbox創(chuàng)建水平瀑布流式照片布局，無需JavaScript，即可實現(xiàn)任意尺寸照片的無縫排列。

這種方案不僅輕量級，而且非常簡單。我們只需要一個無序圖像列表和17行CSS代碼，核心在于Flexbox和object-fit屬性。

為什么選擇這種方法？

我有兩個愛好：用照片記錄生活，以及探索CSS屬性（新舊皆可）的有趣組合方式。

幾周前，我參加了XOXO活動，拍攝了大量照片，最終篩選出39張精美的照片。為了更好地管理自己的內(nèi)容，過去幾年我一直想創(chuàng)建一個簡單的照片博客，但始終無法實現(xiàn)我理想中的布局：一個簡單的瀑布流布局，照片在保持其縱橫比的同時填充行（想想iOS上的照片應(yīng)用、Google相冊、Flickr……）。

我做了一些研究，看看是否有任何輕量級的、非JavaScript的選項，但找不到任何符合我需求的方案。在等待航班延誤期間，我開始嘗試一些代碼，并限制自己盡可能保持代碼簡潔（因為這正是我認為的樂趣所在）。

基本HTML結(jié)構(gòu)

由于我基本上是創(chuàng)建一個圖像列表，所以我選擇了一個無序列表：

<li> <li> <!-- ... more images ... -->

Flexbox的妙用

然后是一系列靈光乍現(xiàn)的時刻：

<li>Flexbox非常適合通過根據(jù)單元格內(nèi)容確定單元格寬度來填充行。 <li>這意味著所有圖像（橫向或縱向）都需要具有相同的高度。 <li>我可以使用object-fit: cover;來確保圖像填充單元格。

理論上，這聽起來像是一個可靠的方案，它讓我得到了一個我90%滿意的結(jié)果。

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 40vh;
  flex-grow: 1;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

注意： 40vh 對于桌面瀏覽器來說似乎是最佳的初始方法，它以合理的大小顯示兩行完整的照片，并暗示下面還有更多照片。這也允許每行顯示更多照片，從而顯著改善縱橫比。

處理最后一行伸展問題

我遇到的唯一問題是Flexbox 非常想填充所有行，它對最后一行照片的縱橫比做了一些奇怪的事情。這可能是我對這個布局最不喜歡的一點，但我不得不在列表的末尾添加一個空的<li>元素。

<!-- ... more images ... -->

結(jié)合以下CSS代碼：

li:last-child {
  flex-grow: 10;
}

注意： 這里使用“10”并沒有什么科學(xué)依據(jù)。在我的所有測試中，這都提供了最佳結(jié)果。

演示（此處應(yīng)插入演示鏈接或代碼片段）

視口優(yōu)化

在不同的視口方向下工作時，需要考慮一些因素。

豎屏

如果你的視口高度大于寬度，這種方法會限制每行的照片數(shù)量，從而影響其縱橫比。要解決這個問題，你可以使用簡單的媒體查詢使照片行變矮：

@media (max-aspect-ratio: 1/1) {
  li {
    height: 30vh;
  }
}

較短的屏幕

為了適應(yīng)橫向的小型設(shè)備，增加照片的高度有助于盡可能大顯示照片：

@media (max-height: 480px) {
  li {
    height: 80vh;
  }
}

較小的屏幕 豎屏

大多數(shù)手機不夠?qū)?，無法讓Flexbox在不縮小照片的情況下正常工作，所以我選擇不嘗試每行容納多張照片。盡管如此，在這里設(shè)置最大高度仍然值得，這樣你至少可以瞥見列表中的下一張照片。

@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
  ul {
    flex-direction: column; /* 改為列方向 */
  }

  li {
    height: auto;
    width: 100%;
  }

  img {
    width: 100%;
    max-height: 75vh;
    min-width: 0;
  }
}

總結(jié)

這種方法并沒有完全尊重照片的縱橫比（但已經(jīng)很接近了），并且偶爾會導(dǎo)致一些奇怪的結(jié)果，但我絕對喜歡它的簡潔性和靈活性。想要讓你的畫廊水平滾動而不是垂直滾動？只需進行一些調(diào)整即可實現(xiàn)。畫廊中有1000張照片還是只有一張？看起來都很好。不確定縱橫比？Flexbox是你的最佳選擇。如果你還沒有查看演示，請再看一遍，并告訴我你的想法！

額外提示

根據(jù)這些照片的大小，這樣的頁面可能會很快增長到幾兆字節(jié)。在我的博客中，我添加了loading="lazy"來解決這個問題。使用該屬性后，圖像只會在您滾動時接近它們時才加載。目前它只在Chrome中受支持，但您可以自己編寫一個更廣泛支持的技術(shù)。

以上是帶有Flexbox的自適應(yīng)照片布局的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！