这篇文章主要介绍了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前端如何实现小说分页功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
