web实现小说阅读器的水平滑动翻页

大致效果：https://codepen.io/Wangxixi/pen/yWbKdg

主要使用的是CSS3的column属性，这个属性用于多列布局。

容器属性

1、column-width

• 语法：

  column-width: auto | length

   

• 定义为每一列的最小宽度 

 

2、column-count

• 语法：

  column-count: auto | integer

   

• 定义列的理想数量。当容器的总宽度使column-width与column-count出现矛盾之处时，column-count失效，让位于column-width属性。

3、columns

• 语法：

  columns: [column-width] | [column-count]

   

• column-width 与 column-count的合并简写。

4、column-gap

• 语法：

  column-gap: auto | length

   

• 定义列之间的水平间距，默认存在一定间距。

 5、column-rule

• 语法：

  column-rule： [column-rule-width] | [column-rule-style] | [column-rule-color]

   

• 定义列边框，是column-rule-width，column-rule-style 以及 column-rule-color 的简写

 6、column-fill

• 语法：

  column-fill: auto | balance

   

• 定义多列中每一列的高度是否统一。

分栏的属性 

1、column-span

• 语法：

  column-span: none | all 

   

• 定义一个元素横跨多少列

注意 ：

1、column布局高度限制的重要性：

当容器的高度没有限制时，高度默认为auto，此时分栏表现没有问题。

但是，如果设置了高度，当每一个列的内容超出时超出部分会自动生成一列，就算他们在代码上看属于同一个标签内。这样就会造成又是我们设置了column-count，但是我们在视觉上会超出我们设置的数量。

小说水平翻页实现：

从高度限制的展示上我们就可以利用这个规则来实现我们的小说水平翻页

我们把小说每一章的容器宽高设定，并使column-width等于容器宽度，这样每一章的超出文本就会按照column-width的宽度展示为每一列。

然后也设置每一章容器的父元素的宽度，并指定overflow：hidden,最后通过 JS 的 touch事件控制每一章容器的translateX水平移动就可以实现翻页效果了。