JavaScript前端实现小说分页功能示例
目录
- 先让我找找我的思路在哪里
- 思路已至，码来！
- 结束
先让我找找我的思路在哪里
在小说读书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" rel="external nofollow" >
<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);
最后实现的效果就是:
结束
以上就是JavaScript前端实现小说分页功能示例的详细内容，更多关于JavaScript前端小说分页的资料请关注我们其它相关文章！
相关推荐
-
javascript实现前端分页效果
本文实例为大家分享了javascript实现前端分页效果的具体代码,供大家参考,具体内容如下 需求:实现分页请求表格数据,ajax暂时没写,只写了分页的功能. 效果图: 当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态 各个按钮都正常的状态 当页数是第一页的时候,首页和向前那个按钮处于禁止点击的状态 各部分的代码如下: html部分: <!-- 分页 --> <div class="pageBox"> <div class="pageT
-
JavaScript前端分页实现示例
目录 初窥前端分页 前言 需求分析 实现目标: 解决思路: 开工,上代码: 转折: 初窥前端分页 前言 近日接到了一个关于前端分页的需求,某系统仓储模块的分页功能,由于以前分页都是后端处理的,第一次接到这种需求,借此记录一下. 需求分析 应用场景简述:在商品出库以及退回时,需要通过接口获取商品列表,前端通过table方式展示数据,用户多选数据提交后保存在上一级页面的table中. 用户选择数据: 存储用户选择的数据到上一页面 实现目标: 正常的用户翻页,用户已经添加的数据在翻页时进行操作(删除)
-
js实现简单的前端分页效果
有些项目业务比较简单,但用到前端分页的地方又比较多,插件的体积比较难控制用起来也麻烦,所以自己写一个简易的. 实现思路 通过 jQuery.slice()选择子集的区间元素, 然后控制显示隐藏来实现: 假设每页显示数量为x,当前页码为y,元素索引从0开始,那么显示的区间即为 x(y-1) 到 xy. 效果演示 demo代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
-
javascript实现前端分页功能
前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下 先上一波效果图展示: 直接上代码:这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet&qu
-
JS实现前端分页效果
本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 一.HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> <style type="text/css"> a{text-decoration: none;} table
-
JS实现前端动态分页码代码实例
思路分析:有3种情况 第一种情况,当前页面curPage < 4 第二种情况,当前页面curPage == 4 第三种情况,当前页面curPage>4 此外,还要考虑,当前页码 curPage < pageTotal(总页码)-2,才显示 ... 首先,先是前端的布局样式 <body> /*首先,在body中添加div id="pagination" */ <div id="pagination"> <!-- 后面会在
-
JavaScript前端实现小说分页功能示例
目录 先让我找找我的思路在哪里 思路已至,码来! 结束 先让我找找我的思路在哪里 在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢? 因为没有什么思路,那就只能在前辈的项目中寻找思路了. 这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了 好了,然后在找一本有缘书,跟我一同前往那神秘的未知世界. 就决定是你了,开始免费试读. 然后我们就可以发现起点是如何实现这个功能的了,原来是使用columns这个属性来让文章自动分页的昂. 我们现在就去搜
-
Vue+element-ui 实现表格的分页功能示例
本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum
-
JavaScript前端实现压缩图片功能
为什么要前端来压缩图片 最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节. 压缩效果 首先介绍下压缩的大概流程 通过原生的input标签拿到要上传的图片文件 将图片文件转化成img元素标签 在canvas上压缩绘制该HTMLImageElement 将ca
-
Vue后台管理系统之实现分页功能示例
本文主要介绍了Vue后台管理系统之实现分页功能,分享给大家,具体如下: 效果图: 功能描述: 显示数据的总数目 可选择每天的显示条数 点击页码跳转到指定页数 输入页码可跳转到指定页 1.功能实现 1.1 结构 <!-- 分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="quer
-
springboot vue测试前端项目管理列表分页功能实现
目录 基于 springboot+vue 的测试平台开发 一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题 二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码 三.实现分页 1.使用 组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符 基于 springboot+vue 的测试平台开发 继续更新 今天来完成项目列表的前端部分. 一.前后端调通 开发前端页面,框架里有 2 个地方需要改动: src/views: 这
-
JS实现的简单分页功能示例
本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&
-
jQuery实现的分页功能示例
本文实例讲述了jQuery实现的分页功能.分享给大家供大家参考,具体如下: 1.分页栏HTML码 <div class="g-cf g-pagerwp"> <div style="visibility:hidden" class="g-pager"> </div> </div> 2.CSS样式文件 .g-cf:after {clear: both;content: "";disp
-
thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法 首先看一下tp5的分页功能介绍 参数 描述 list_rows 每页数量 page 当前页 path url路径 query url额外参数 fragment url锚点 var_page 分页变量 type 分页类名 $caseDetails = CaseDetails::where(['status'=>1])
-
thinkPHP3.2.3结合Laypage实现的分页功能示例
本文实例讲述了thinkPHP3.2.3结合Laypage实现的分页功能.分享给大家供大家参考,具体如下: 控制器 <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { /** *@brief 查询 ****/ public function index(){ $choose = I('choose','-6'); $c['easy_hard'] = $c
-
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
本文实例讲述了ThinkPHP5.1+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 无刷新分页可以减轻服务器负担,利用Ajax技术,请求部分信息,提高网站访问速度,是网站建设的必备技术. 需要在后台展示自定义属性列表(lst.html),其中的列表部分摘出来,放到(paginate1.html)中: <div class="row"> <div class="col-sm-12"> <div class="i