前端实现小说分页功能（pc、h5）

项目框架react 后台提供数据格式为

 这种带标签格式的数据，react 通过dangerouslySetInnerHTML 可以实现对此种数据类型的渲染，

然后就是分页的说明。

 分页用到css一个columns 属性  具体可查看columns - CSS（层叠样式表） | MDN 讲的很清楚，

可以指定宽度分为几页 ，我这里css设置的为

注意文章父级样式必须设置为100vh 文章的高度可以自己随意设置，column-gap是列之间的距离，这样 文章就自己横着排号了 ，此时我们只需要通过css的平移属性 平移到我们想要的列就可以实现翻页了。

1、pc分页

通过点击事件实现上一页下一页，

 

 

pagenum是计算的总页数-1，因为当第二页的时候才需要平移一个单位，页码后面要自己加上一， clientWidth 是整个可视宽度，scorllWidth是文章横着排好后的总宽度，这里计算目前还算正确 不知道会不会出错，因为我用的四舍五入，其实可以再加一页更保险，但是最后一页是空的就很奇怪，同时scorllwidth除去单列文章宽度并不会得到一个整数，对此我也很懵，只能这样写了。。。。。。

2、h5分页

h5分页较为简单 也是计算页码很头疼，谁能教教我怎么算。。。。。。

 

平移总的来说没有什么为题，宽高自己都可以定义比较方便，    以上 就是一个比较垃圾的翻页效果，，，，，参考就行，勿喷谢谢。。。。。