先讓我找找我的思路在哪裡？
在小說讀書APP中，都會有分頁的功能，那麼前端如何實作這個功能呢？
因為沒有什麼思路，那就隻能在前輩的項目中尋找思路了。
這不，直接打開起點的頁面，按下那個傳說中的F12鍵，開始我傳奇生涯！...不好意思，串台了
好了，然後在找一本有緣書，跟我一同前往那神秘的未知世界。
就決定是你了，開始免費試讀。
然後我們就可以發現起點是如何實作這個功能的了，原來是使用
columns
這個屬性來讓文章自動分頁的昂。
我們現在就去搜尋一下
columns
是何方神聖吧。
developer.mozilla.org/zh-CN/docs/… - MDN
通過MDN的執行個體我們知道了原來
columns
是一個簡寫屬性，代表了
column-width
和
column-count
兩個屬性，這兩個屬性又分别代表着：
<'column-width'>
理想的列寬，定義為 或 auto 關鍵字。實際寬度可以更寬或更窄以适合可用空間。See column-width。
<'column-count'>
元素内容應分成的理想列數，定義為 或 auto 關鍵字。如果此值和列的寬度都不是 auto ，則它僅訓示允許的最大列數。請參閱 column-count 。- MDN
然後我們再看回起點中對這個屬性的定義
columns: calc(100vw - 32px) 1;
其中
calc(100vw - 32px)
這個代表
column-width
的值代表了每一列的寬度為整屏的寬度再減去兩邊的間隙各
16px
。
這裡一提就是列與列的間隙，是以在圖中可以看到這裡的值設定了column-gap
16px
而代表
column-count
這個值的
1
就是隻保持一列，并沒有什麼作用，因為
100vw - 32px
這個寬度已經不可能讓螢幕中再多一列了，多出的列數将會排列在右側。
當使用 columns 規定兩個值時，如:
columns: 100px 3;
表示：
當每列寬度大于 100px 時，就以 3 列分割顯示；當浏覽器寬度縮小，導緻在 3 列情況下無法滿足每列大于 100px，就開始轉為 2 列；當浏覽器再縮小，2 列中每列無法再保持 100px 每列時，再次轉為 1 列...
以此類推，"100px" 為每列不可低于的寬值，"3" 表示指定要顯示的列。相對于單獨設定 column-width 或 column-count，columns 要更加靈活。- 菜鳥教程 - Kai
還有一點需要注意的是，需要将文章的高度設定為螢幕的高度，這樣才會排成多列。
再通過
translate
進行平移，以及父級的
overflow: hidden
隐藏多餘列，就可以達到分頁的效果了。
最後看看
columns
的相容性:
可以看出都支援了這個屬性，可以放心大膽的用。
思路已至，碼來！
我們來簡單的實作一下這個效果。
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./vue.js"></script>
</head>
<body>
<div class="wrapper">
<article>
<h3>第一章: 我不是小說</h3>
<p>小說真可愛，我要看小說，小說不給看，我就寫小說，寫小說不好寫，我就看小說............</p> <!-- *1000 -->
</article>
</div>
<script src="./app.js"></script>
</body>
</html> // style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper{
height: 100vh;
overflow: hidden;
margin: 0 16px;
}
article{
columns: calc(100vw - 32px) 1;
column-gap: 16px;
height: 100%;
transition: .4s;
} let i = 0;
let article = document.querySelector('article');
setInterval(() => {
let width = document.body.offsetWidth;
i++;
if(i > 3) i = 0;
article.style.transform = `translateX(-${(width - 16) * i}px)`
}, 1000); 最後實作的效果就是:
到這裡就結束了，感謝閱讀。