HTML+CSS07 瀑布流佈局

預備知識：Column佈局

CSS Columns（多列布局）是一種定義了多欄佈局的模塊，它可以表現出將內容在列之間怎麼流動的以及間隙和分割線怎麼使用。瀏覽器的兼容性仍是不錯的，生產環境建議-moz和-webkit前綴以及不加前綴三種形式共同使用

columns

CSS多列布局能夠輕鬆的實現多列的瀑布流佈局，它的兩個關鍵屬性是column-count和cloumn-width

column-count設置多列布局得的列數，取值：

• auto，由其餘CSS屬性來決定列的數量，好比column-width
• <number>，用來描述元素內容被劃分的列數，若是column-width也設置爲非零值，此參數僅表示所容許的最大列數

column-width用來設定最佳列寬，取值：

• auto，由其餘CSS屬性來決定列的數量，好比column-count
• <length>，用來描述最理想的列寬，實際列寬可能更寬（用來填充可用空間）也可能更窄（當可用空間比指明的列寬更窄），若是column-width也設置爲非零值，此參數僅表示所容許的最大列數

由於這兩個屬性值沒有重疊，能夠使用columns來進行簡寫：

column-count: 5       →     columns: 5
column-width: 200px   →     columns: 200px
↓
columns:  5 200px
複製代碼

高度

通常來講，多列布局的高度是由瀏覽器自動肯定的，可是也能夠經過設置height或者max-height來限制列的高度。這樣在生成新的一列以前都會僅容許增長到這個高度，剩下的內容會放置到下一列中。（這樣會令咱們的設置的column-count失效）

未設置高度：

設置最大高度後，列數超出了設置的column-count: 4：

列間隙

column-gap屬性來設置列之間的間隔，取值：

• normal，多列布局時默認值爲1em，其餘類型佈局時默認值爲0
• <length>，非負整數
• <percentage>，基於父元素寬度的百分比

列分割線

能夠經過column-rule屬性來爲多列布局時各列之間添加分割線，它與border屬性相似，也是一個縮寫屬性，它是由下面三個屬性構成：

• column-rule-width，指定分割線寬度，能夠設定具體數值，也能夠在thin、medium、thick之間取值
• column-rule-style，指定分割線的樣式，取值與border-style相似
• column-rule-color，指定分割線的顏色

添加這個屬性後column-rule: thick inset blue：

使用多列布局實現瀑布流

使用多列布局實現瀑布流就十分簡單了：

DOM結構直接用一個多列布局的容器，內部防止排列的元素便可：

<div class="container">
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  <div class="img-container"><img src="./images/1.jpg" alt=""></div>
</div>
複製代碼

關鍵是設置container的多列布局的相關屬性：

.container {
  width: 1000px;
  column-count: 4;
  column-gap: 1em;
  column-width: 220px;
}
.img-container {
  margin-bottom: 10px;;
  break-inside: avoid;
}
複製代碼

完整代碼在這裏。

此外，須要在內部元素上添加一個break-inside屬性，用來防止多列布局中內容之外中斷，取值：

• auto，不強制也不由止元素內的頁、列中斷
• avoid，避免元素內的分頁符、列中斷以及區域中斷
• aviod-page，避免元素內的分頁符
• aviod-column，避免元素內的列中斷
• aviod-region，避免元素內的區域中斷

實現的效果：

多列布局來實現瀑布流佈局的優勢是靈活簡單，而且不須要JavaScript參與，且DOM結構很簡單，缺點除了須要考慮兼容性以外，我沒發現缺點

使用Flex佈局實現瀑布流

以前面試的時候被問到，如何實現瀑布流，我當時並不知道多列布局，天然而然就想到使用Flex實現。Flex徹底能夠實現，可是DOM結構會稍微複雜一些

首先須要讓父容器成爲Flex容器，再使用4個<div>充當列，而後向每一個列中分別添加元素便可（網上有一些方案認爲列元素內部還須要使用Flex佈局，而後flex-direction爲column，我以爲沒有必要，天然向下排列就能夠了吧）

<div class="container">
  <div class="col">
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
  </div>
  <div class="col">
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  </div>
  <div class="col">
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  </div>
  <div class="col">
    <div class="img-container"><img src="./images/2.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
    <div class="img-container"><img src="./images/1.jpg" alt=""></div>
  </div>
</div>
複製代碼

CSS設置並不複雜：

.container {
  display: flex;
  width: 1000px;
  justify-content: space-around;
}
複製代碼

完整代碼在這裏。

實現的效果：

這種方法優勢是兼容性好，缺點主要是DOM結構複雜一些，並且須要手動的將獲取的元素插入到不一樣的列中，還須要綜合考慮各列的高度，放着某一列高度超出其餘列太多。

參考

• 使用CSS的多列布局@MDN
• column-rule-color@MDN
• break-inside@MDN
• 純css實現瀑布流（multi-column多列及flex佈局）@segmentfault