datagrid sortname如何定义多列_如何实现一个小说分页的功能
你的关注意义重大!
来源 | https://juejin.im/post/6886418644381728776
先让我找找我的思路在哪里?
在小说读书APP中,都会有分页的功能,那么前端如何实现这个功能呢?因为没有什么思路,那就只能在前辈的项目中寻找思路了。这不,直接打开起点的页面,按下那个传说中的F12键,开始我传奇生涯!...不好意思,串台了好了,然后在找一本有缘书,跟我一同前往那神秘的未知世界。就决定是你了,开始免费试读。然后我们就可以发现起点是如何实现这个功能的了,原来是使用columns
这个属性来让文章自动分页的昂。我们现在就去搜索一下columns
是何方神圣吧。
developer.mozilla.org/zh-CN/docs/… - MDN
通过MDN的实例我们知道了原来columns
是一个简写属性,代表了 column-width
和column-count
两个属性,这两个属性又分别代表着:
理想的列宽,定义为 或 auto 关键字。实际宽度可以更宽或更窄以适合可用空间。See column-width。元素内容应分成的理想列数,定义为 或 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
Document
第一章: 我不是小说
第一章: 我不是小说
小说真可爱,我要看小说,小说不给看,我就写小说,写小说不好写,我就看小说............
// 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);
最后实现的效果就是:到这里就结束了,感谢阅读。最后
感谢阅读,欢迎分享给身边的朋友,
记得关注噢,黑叔带你飞!
亲,点这涨工资
datagrid sortname如何定义多列_如何实现一个小说分页的功能相关推荐
- java mysql vo mybatis 分页_使用mybatis-plus如何实现分页查询功能
使用mybatis-plus如何实现分页查询功能 发布时间:2020-11-06 17:34:12 来源:亿速云 阅读:538 作者:Leah 今天就跟大家聊聊有关使用mybatis-plus如何实现 ...
- MySQL查询多表定义实体类_自己设计一个 JAVA + MyBatis 解析实体类多表通用查询
先来处理一下查询的字段和用到的表吧 //虽然我们使用的时候是实体,但最终还是要解析成sql的,那么我们需要想好解析成sql 时候所用到的东东,提前准备好 class TableEntity { Str ...
- java语言计算器怎么写_求助,一个计算器的括号功能怎么写啊。
求助,一个计算器的括号功能怎么写啊. import javax.swing.*; import javax.swing.event.*; import java.awt.*; import java. ...
- 实例解析:OperaMasks2.0中的DataGrid之一:定义DataGrid
OperaMasks2.0中的DataGrid之一:定义DataGrid 1. 新版DataGrid介绍 2. 简单的动态定义表格 2.1. 准备数据 2.2. 定义简单的动态表格 2.3. Grid ...
- jstl 获取 javascript 定义的变量_一个后端开发者前端语言基础:JavaScript
(一) 基本概述 (1) 概述 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端 ...
- bootstarp js设置列隐藏_Bootstrap框架----DataTables列表移动端适配定义隐藏列
我们在上一章节中已经学习了DataTables在BootStrap框架中的使用方式和初始化. Bootstrap框架--DataTables列表示例 最终效果如图: Bootstrap是自动适配移动端 ...
- DataGrid中的超级链接列使用注意点
在DataGrid中的超级链接列的信息后面想要加入其他的信息,如标志性图片等,在ItemDataBound的事件中进行附加数据,这样是取不到数据的(原数据不能显示了),有另外一个方法,就是不用超级链接 ...
- sql2008表支持多少列_数据库表分区是怎么回事?
数据库表分区是怎么回事? 大家好,这一期呢,我们来说一下,数据库表和索引的分区.讲解这个问题,对于不同的数据库可能有一些技术细节上的不同,因此我们以某个数据库比如sql server为例来探讨这个 ...
- easyui datagrid编辑时修改其它列的数值.
easyui datagrid编辑时修改其它列的数值. { field: 'converter', title: '转化器', align: 'left', width: 250,editor: {t ...
最新文章
- Java如何优雅的实现时间控制
- ASUS华硕笔记本电脑的数字小键盘按什么健切换?
- boost::math模块使用二项分布复制 NAG 库调用的测试程序
- javascript 模板引擎基本原理
- HDU 5691 Sitting in Line 状压dp
- Informix IDS 11体系操持(918测验)认证指南,第 4 部门: 机能调优(1)
- XCode10 swift4.2 适配遇到的坑
- 关于Mysql的错误:No query specified
- 【Flink】flink 升级 the given -yarn-cluster does not contain a valid port
- JDK/Java 14 可能带来什么新特性?
- 如何运行网页html,如何在网页中运行html代码
- CWnd的派生类-1、CFrameWnd类
- 把Windows Phone应用发布到中国
- 51nod1534 棋子游戏
- 向量积的坐标运算公式推导_向量积坐标表示公式
- HTML5 教程(四) - 内联元素
- 学习基于html和JavaScript的滑动图片拼图验证源码
- qiankun使用Actions实现通信
- 访问远程Redis服务。Connect to Remote Redis Server
- getchar消除回车符号