什么是瀑布流？

看一張圖，以下圖片來源于花瓣網(wǎng)截圖：

如上圖所示，瀑布流就是讓內(nèi)容按列顯示，自動填充空白。

使用 column 實現(xiàn)瀑布流

源碼：

<div class="masonry">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>
<style>
:root{
  --item-bg-1: #ff4757;
  --item-bg-2: #cea442;
  --item-bg-3: #18005f;
  --counter-bg: #dedede;
}
.masonry {
  column-count: 1;
  column-gap: 20px;
  /* 重置計數(shù)器 */
  counter-reset: item-counter;
  
}
/* 使用媒體查詢處理不同視口寬度顯示不同列數(shù) */
@media screen and (min-width: 400px) {
  .masonry {
    column-count: 2;
  }
}
@media screen and (min-width: 600px) {
  .masonry {
    column-count: 3;
  }
}
@media screen and (min-width: 800px) {
  .masonry {
    column-count: 4;
  }
}
@media screen and (min-width: 1200px) {
  .masonry {
    column-count: 5;
  }
}
.item {
  box-sizing: border-box;
  break-inside: avoid;
  margin: 0 0 20px;
  /* css 計數(shù)器 */
  counter-increment: item-counter;
  position: relative;
}
/* 顯示計數(shù)器 */
.item:before {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 0;
  min-width: 2em;
  text-align: center;
  background-color: var(--counter-bg);
  content: counter(item-counter);
}
/* 給 item 設(shè)置不同的高度和背景色 */
.item:nth-child(7n+1) {
  height: 151px;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+2) {
  height: 187px;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+3) {
  height: 289px;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+4) {
  height: 123px;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+5) {
  height: 234px;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+6) {
  height: 188px;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+7) {
  height: 149px;
  background-color: var(--item-bg-1);
}
</style>

效果：

視口寬度大于 1200px 時，顯示 5 列：

視口寬度在 600px-800px 之間時，顯示 3 列：

column 相關(guān)屬性

column-count

column-count 聲明顯示多少列。默認值為 auto，由瀏覽器自己決定。

column-fill

column-fill 控制元素內(nèi)容分成列時的平衡方式。有效值：auto（按順序填充列）、balance（僅最后一頁內(nèi)容平均分配到各列）、balance-all（全部分頁內(nèi)容平均分配到各列）。

column-gap

column-gap 設(shè)置列間隔。默認值 normal 表示列間距占用 1em 寬度。

column-rule

column-rule 簡寫屬性，包含 column-rule-width、column-rule-style 和 column-rule-color 。

column-rule-width 設(shè)置線條寬度。
column-rule-style 與 border-style 一樣，支持值：none 、 hidden 、 dotted 、 dashed 、 solid 、 double 、 groove 、 ridge 、 inset 、 outset。
column-rule-color 設(shè)置線條顏色。

column-span

column-span 設(shè)置子元素是否跨列顯示。有效值：none（不跨列）、all（跨列）。

column-width

column-width 設(shè)置列的寬度。瀏覽器會自動調(diào)整寬度大小，如果設(shè)置的寬度連兩列都放不下，會自動變?yōu)橐涣酗@示（如圖三）。

columns

columns 簡寫屬性，可組合設(shè)置 column-width 和 column-count 屬性。

grid 實現(xiàn)瀑布流

源碼：

<div class="masonry">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>
<style>
:root{
  --item-bg-1: #ff4757;
  --item-bg-2: #cea442;
  --item-bg-3: #18005f;
  --counter-bg: #dedede;
}
.masonry {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: dense row;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(50px, auto);
  /* 重置計數(shù)器 */
  counter-reset: item-counter;
}
.item {
  box-sizing: border-box;
  /* css 計數(shù)器 */
  counter-increment: item-counter;
  position: relative;
}
/* 顯示計數(shù)器 */
.item:before {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 0;
  min-width: 2em;
  text-align: center;
  background-color: var(--counter-bg);
  content: counter(item-counter);
}
/* 給 item 設(shè)置不同的高度和背景色 */
.item:nth-child(7n+1) {
  grid-row: 1 / 4;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+2) {
  grid-row: 1 / 3;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+3) {
  grid-row: 1 / 4;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+4) {
  grid-row: 4 / 7;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+5) {
  grid-row: 3 / 9;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+6) {
  grid-row: 4 / 8;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+7) {
  grid-row: 7 / 11;
  background-color: var(--item-bg-1);
}
</style>

效果：

寫在最后

在多列布局方面 column 屬性相比于 flex 和 grid 而言，顯得更有優(yōu)勢。

雖說 grid 也能做出瀑布流效果，不過需要指定每個網(wǎng)格單元的占用大小。

column 雖然不用控制每個子項的大小，但它的子元素排列順序是從上到下排列，并不是從左往右，這種情況如果數(shù)據(jù)存在分頁加載時候，就會出現(xiàn)內(nèi)容重新排列導(dǎo)致內(nèi)容閃動。

在瀑布流布局這個需求場景下，CSS 多多少少還是有點弱雞~~必要時候還是只有祭出 JS 。

其他相關(guān)資料：

break-* 控制多列布局如何中斷換列： https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-inside

?轉(zhuǎn)自https://www.cnblogs.com/linx/p/18867615