天天一個小技巧：純CSS實現瀑布流（Masonry）

瀑布流提供了一種錯落有致的美觀佈局，被各類注重交互品味的素材網站（如：花瓣、unsplash）普遍應用。社區也提供了很多瀑布流佈局的工具，如：masonry 、colcade 等。常規的實現瀑布流的作法是用 JS 動態的計算「磚塊」的尺寸和位置，計算量大、性能差。今天給你們介紹一種使用純 CSS 實現瀑布流的方法，簡潔優雅。主要使用到了 CSS 中的多列屬性 columns。

在使用一個比較陌生的 CSS 屬性以前，習慣性的瞭解一下它的兼容性，去 caniuse.com 瞅一眼：

看着兼容性還不錯，那就放心的用吧。

HTML

先構造頁面結構：

<div class="masonry">
  <div class="item">
    <img src="http://source.unsplash.com/random/400x600" />
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>

  ...more...
</div>

在 div.masonry 容器中能夠塞進任意多的 「磚塊」 div.item，「磚塊」 中的圖片能夠從 unsplash 中隨機獲取，且能夠制定圖片的尺寸。

CSS

容器：

.masonry {
  width: 1440px; // 默認寬度
  margin: 20px auto; // 劇中
  columns: 4; // 默認列數
  column-gap: 30px; // 列間距
}

磚塊：

.item {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 30px;
}

.item img {
  width: 100%;
}

.item h2 {
  padding: 8px 0;
}

.item P {
  color: #555;
}

上面的樣式其餘都挺好理解，惟獨 break-inside 這個屬性比較陌生。讓咱們看一下去掉 break-inside 以後會有什麼問題吧：

能夠看到有兩個「磚塊」的文字跑到上面和圖片分開了。因此當設置了 break-inside: avoid 以後能夠避免「磚塊」內部的內容被斷開。

不一樣屏幕尺寸適配

以上樣式默認適配 PC，在其餘尺寸設備上須要從新設置列數、列間距等樣式，能夠經過 media query 進行適配，好比：

ipad pro:

@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
  .masonry {
    width: 96vw;
    columns: 3;
    column-gap: 20px;
  }
}

ipad:

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .masonry {
    width: 96vw;
    columns: 2;
    column-gap: 20px;
  }
}

mobile:

@media screen and (max-width: 767.98px) {
  .masonry {
    width: 96vw;
    columns: 1;
  }
}

注意：屏幕尺寸區間不要有交集，也不要有缺口！

好了，大功告成，來張全家福!

本文Demo參考：Codepen Trick by Day (2020-07-06) Pure CSS Masonry

天天一個小技巧（Tricks by Day），量變引發質變，但願你和我一塊兒天天多學一點，讓技術有趣一點。

全部示例將會彙總到個人 tricks-by-day github項目中，歡迎你們蒞臨指導 😊