CSS3如何使用column多欄布局實現(xiàn)水平滑頁翻頁交互

發(fā)布時間：2022-03-05 13:53:07 來源：億速云閱讀：189 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細講解有關CSS3如何使用column多欄布局實現(xiàn)水平滑頁翻頁交互，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、CSS3 column多欄布局

CSS3 column多欄布局是支持比較早的CSS3布局方式，目前IE10+以及其他所有現(xiàn)代瀏覽器都支持，IE瀏覽器不需要私有前綴，F(xiàn)ireFox和Chrome雖然現(xiàn)在也不需要，但是，考慮到移動端以及可能一些用戶瀏覽器升級不及時的現(xiàn)狀，因此，-webkit-以及-moz-前綴目前還不能省略。

一般來講，常用的屬性又下面幾個：

column-width: 每欄的寬度；
column-count: 最理想的分欄數(shù)目，注意這里的措辭，是“理想的”，這個詞很微妙的，大家可以多多體會下；
column-gap: 欄目之間的水平間隙；
column-rule: 分割線，形式規(guī)則什么的等同于border，column-rule實際上是一個縮寫，還有column-rule-width，column-rule-style，column-rule-color之類，就跟border屬性一個套路；
column-fill: 效果不明，不算常用。默認值是balance，表示對每欄進行協(xié)調(diào)。還可以使用值auto，表示每一欄按順序填充。我是沒搞清楚有什么區(qū)別。

其中，還有個縮寫屬性，名為columns，實際上是column-width和column-count的縮寫：

columns: 120px;  /* column-width: 120px; column-count: auto */columns: auto 120px; /* column-width: 120px; column-count: auto */columns: 2;   /* column-width: auto; column-count: 2 */columns: 2 auto;  /* column-width: auto; column-count: 2 */columns: auto;  /* column-width: auto; column-count: auto */columns: auto auto; /* column-width: auto; column-count: auto */

如果翻看一些文章或者demo示意，基本上都是下面這種套路，容器指定一個大大的寬度，然后通過column-count屬性設定分為了幾欄，比方說，如果是：

column-count:4

則會是按下圖所示的樣子（不同瀏覽器細節(jié)上會有差異）：

CSS3如何使用column多欄布局實現(xiàn)水平滑頁翻頁交互

如果是：

column-count:3

則：
CSS3如何使用column多欄布局實現(xiàn)水平滑頁翻頁交互

如果是：

column-count:2

則：
CSS3如何使用column多欄布局實現(xiàn)水平滑頁翻頁交互

看上去好像很厲害，而且離理解上難度并不高，然而，這么多年下來，我?guī)缀蹙蜎]有看到任何項目中有類似的使用。

column多欄布局和flex彈性布局基本上是同一時間段出現(xiàn)的，從兼容性來講，column多欄布局一直以來更穩(wěn)定更兼容，而flex彈性布局前前后后歷經(jīng)多個版本，直至現(xiàn)在有些移動設備支持依然不好，但是兩者的命運卻截然相反，column多欄布局鮮有人問津，而flex彈性布局則風生水起。面試的時候，就算面試者并未在實際項目中使用過flex彈性布局，也會時不時扯到這東西上來，好像不提flex布局就跟時代脫節(jié)一樣，其實完全沒有必要，每個CSS屬性都有它的潛力和價值所在，挖掘其內(nèi)在價值而不是單純的被外在的那層表現(xiàn)困于廬山才是真正想要看到的。

回到這里，如果我們僅僅看到上面示意的這種常規(guī)表現(xiàn)，必然會覺得多欄布局似乎好像應用場景不是那么廣泛，因為只有類似報刊雜志這種排版才會需要多欄布局，在web中，寬度往往是有限的，高度是無限的，所謂多欄布局，一般而言，就是指的分割寬度，但是想想看，寬度本來就不夠，何來場景再讓你去分呢？綜合這些因素導致多欄布局閑有人問津。

但是如果我們挖掘多欄布局的潛力，會發(fā)現(xiàn)其實其能夠?qū)崿F(xiàn)的布局或者效果要比表面看上去的多。

我們這里書頁的水平滑動瀏覽效果就是使用的CSS3 column屬性實現(xiàn)的。

二、CSS3 column有趣的空間使用特性及水平滑動瀏覽效果實現(xiàn)

margin也在空間計算之列
這是什么意思呢？比方說上面4欄的例子，如果我們把文字內(nèi)容變少，會發(fā)現(xiàn)，可能就會這樣，Chrome和IE瀏覽器下都是如此，看上去就好像只有3列顯示了：
實際上并不是只顯示了三列，而是因為示意的HTML結構如下：
```
<div class="box col4">
    <p>文字...</p>
</div>
```
<p>默認上下有1em的margin間距的，于是乎，我們看上去好像是第四欄空缺，實際上被<p>元素的margin-bottom給占據(jù)了，如果我們使用下面的CSS重置掉<p>標簽的margin值，會發(fā)現(xiàn)，如預期的4列顯示了：
```
.box p {
    margin: 0;
}
```
column布局高度也是重要限制
上面幾個column-count示意都是定了個寬度600px，高度是默認的auto，因此，分欄的表現(xiàn)都很乖巧，反正高度是無限的，無論你設置多少欄，我都可以通過調(diào)整高度來實現(xiàn)。
但是，如果我們高度也設定了固定的值，例如高度60px，則此時很多有意思的事情就會發(fā)生了。
如果說僅僅只是指定了column-count，至少在容器元素的可視尺寸范圍內(nèi)，還是設定的分欄數(shù)目，例如column-count:3，雖然視覺上遠不止3欄，但是容器可視尺寸范圍就是3欄，如下截圖示意：
column-width會讓column-count打醬油
這是什么意思呢？比方說下面的CSS：
```
.col4 {
    width: 600px;
    column-count: 4;
    column-width: 200px;
}
```
顯然這里有矛盾之處，每欄寬度200px，總共要4欄，就算不考慮每欄之間的間隙，也至少需要800px的寬度，但是，我們?nèi)萜髟O定的寬度只有600px，怎么辦呢？
那即是column-count忽略無效打醬油，不要覺得不合理，也不要抱不平說為什么犧牲的是column-count，而不是其他屬性？那是因為column-count天生注定就是要犧牲的命，因為其語義解釋就是“最理想的分欄數(shù)目”，所謂最理想，就是你該犧牲的時候就要犧牲。
實際上這里最終的每欄每列寬度表現(xiàn)并不是200px，如果我沒算錯的話，在沒有樣式重置的情況下，應該是292px。
高寬同時限制可以實現(xiàn)完美分頁
如下CSS代碼：
```
.example {
    height: 120px;
    width: 100px;
    column-width: 100px;
}
```
如果我們把100px*120px的這個名為.example的小容器看成是一頁內(nèi)容的話，則此時，我們?nèi)萜髦械乃袃?nèi)容，就被完美的分成了一頁一頁水平呈現(xiàn)的內(nèi)容，如下截圖：
這里就是我們書籍水平滑動瀏覽的關鍵所在，此時，如果我們給父元素有個如下的overflow限制：
```
.father {
  width: 100px;
  overflow: hidden;
}
```
此時就形成了一個永遠只會顯示一頁寬度的視窗，然后下面的事情就簡單了，我們通過JS一些一些touch相關的事件，控制我們的.example元素translateX位移，就可以實現(xiàn)一開始展示的水平滑屏瀏覽小說內(nèi)容的效果了。
完美撒花！