css3 分栏 滑页翻页,基于CSS3 column多栏布局实现水平滑页翻页交互

一、CSS3 column多栏布局

私有前缀：

-webkit-、-moz-

常用的属性:

column-width：每栏的高度

column-count：最理想的分栏个数

column-gap：栏目之间的水平间隔

column-rule：分割线，实际上是一个缩写，还有column-rule-width,column-rule-style,column-rule-color，就跟border是一个套路。

column-fill：效果不明。

其中还有一个缩写属性，名字为columns，其实是column-width和column-count的缩写。

columns: 120px; /* column-width: 120px; column-count: auto */

columns: auto 120px; /* column-width: 120px; column-count: auto */

columns: 2; /* column-width: auto; column-count: 2 */

columns: 2 auto; /* column-width: auto; column-count: 2 */

columns: auto; /* column-width: auto; column-count: auto */

columns: auto auto; /* column-width: auto; column-count: auto */

二、CSS3 column有趣的空间使用特性及水平滑动浏览效果实现

1. margin也在空间计算之列

我是一个兵...

标签默认有上下1em的margin间距，所以会导致第四栏有可能为空白，原因是被

标签的margin-bottom给占据了。

2. column布局高度也是重要限制

上面几个column-count示意都是定了个宽度600px，高度是默认的auto，因此，分栏的表现都很乖巧，反正高度是无限的，无论你设置多少栏，我都可以通过调整高度来实现。

但是，如果我们高度也设定了固定的值，例如高度60px，则此时很多有意思的事情就会发生了。

如果说仅仅只是指定了column-count，至少在容器元素的可视尺寸范围内，还是设定的分栏数目，例如column-count: 3，虽然视觉上远不止3栏，但是容器可视尺寸范围就是3栏。

3. column-width会让column-count打酱油

.col-4 {

width: 600px;

column-count: 4;

column-width: 200px;

}

显然这里有矛盾之处，每栏宽度200px，总共要4栏，就算不考虑每栏之间的间隙，也至少需要800px的宽度，但是，我们容器设定的宽度只有600px，怎么办呢？

那即是column-count忽略无效打酱油，不要觉得不合理，也不要抱不平说为什么牺牲的是column-count，而不是其他属性？那是因为column-count天生注定就是要牺牲的命，因为其语义解释就是“最理想的分栏数目”，所谓最理想，就是你该牺牲的时候就要牺牲。

实际上这里最终的每栏每列宽度表现并不是200px，如果我没算错的话，在没有样式重置的情况下，应该是292px。

4. 高宽同时限制可以实现完美分页

.example {

height: 120px;

width: 100px;

column-width: 100px;

}

如果我们把100px*120px的这个名为.example的小容器看成是一页内容的话，则此时，我们容器中的所有内容，就被完美的分成了一页一页水平呈现的内容。

此时，如果我们给父元素有个如下的overflow限制：

.father {

width: 100px;

overflow: hidden;

}

此时就形成了一个永远只会显示一页宽度的视窗，然后下面的事情就简单了，我们通过JS一些一些touch相关的事件，控制我们的.example元素translateX位移，就可以实现一开始展示的水平滑屏浏览小说内容的效果了。

PS:如何判断已经滑动到底部，很简单啊，设置overflow:hidden容器的scrollWidth值就是子元素的宽度。