溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript前端如何實現小說分頁功能的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇JavaScript前端如何實現小說分頁功能文章都會有所收獲，下面我們一起來看看吧。
我們知道原來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" rel="external nofollow" > <script src="./vue.js"></script> </head> <body> <div class="wrapper"> <article> <h4>第一章: 我不是小說</h4> <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);關于“JavaScript前端如何實現小說分頁功能”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“JavaScript前端如何實現小說分頁功能”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
