CSS3text中column多列详解与实现简单的小说滑动换页效果

最新推荐文章于 2024-07-23 11:50:44 发布

shalltear

最新推荐文章于 2024-07-23 11:50:44 发布

阅读量1.3k

点赞数 1

文章标签： css3 javascript 滑动翻页 columns column

本文链接：https://blog.csdn.net/zmdmwh/article/details/86549437

版权

1.column的一些参数与属性

①直接使用columns，可以填入两个属性，中间用空格隔开，第一个属性相当于设置column-width每一列的宽度是多少px（这个属性不太准，父级自适应的话这个宽会忽多忽少，跟round的平铺差不多，可以把父级宽度固定后再使用），第二个属性相当于设置column-count想分成几列，属性可以分开写；

②column-gap是控制中间的空隙是多少px；

③column-rule：跟boder一样的写法，设置中间缝隙的边框；

④column-span：可以让一些p标签贯穿整行，每一列都有它，可以用于下面几列文字的标题；

⑤column-break-before：填入除默认外唯一好用的属性always，效果是在之前断列，另起一列，column-break-after相反。

注意：column布局不太适合瀑布流设计，因为这个布局会优先铺满少数列，如果想用四列，一列3张图，虽然8张图时是每列两张，但当你填充9张图时它会把左三列填满，第四列空出来。

2.滑动换页效果

如果把overflow: hidden关闭的话是这样的

js方面还是很简单的，只是使用了onmousedown、onmouseup跟一些逻辑判断，需要注意一点是，设置column-count时要用1，因为在父级中就是展示1列，其它的它会自动帮你分好（刚开始不清楚，还在想几百k的小说分成多少列合适）。

3.源码展示（data.myData是我的小说内容文本）

js:

var pageTrunning = {
    ele: {
        startReading: document.getElementById('start'),
        wrapperDiv: document.getElementsByClassName('wrapper')[0],
    },
    init: function () {
        this.bindEvent();
    },
    bindEvent: function () {
        this.ele.startReading.onclick = function () {
            pageTrunning.ele.wrapperDiv.innerHTML = '<span style="transform:translateX(0px);" id="content">' + data.myData + '</span>';
        };
        this.ele.wrapperDiv.onmousedown = function (e) {
            var x1 = e.clientX;
            pageTrunning.ele.wrapperDiv.onmouseup = function (e) {
                var x2 = e.clientX;
                var content = document.getElementById('content');
                var prop = parseInt(content.style.transform.replace('translateX(', ""));
                if (prop >= 0) {
                    x1 - x2 >= 0 ? content.style.transform = 'translateX(' + (prop - 400) + 'px)' : content.style.transform = 'translateX(' + (prop) + 'px)';
                    x1 - x2 < 0 ? alert('已是首页') : 0;
                } else {
                    x1 - x2 >= 0 ? content.style.transform = 'translateX(' + (prop - 400) + 'px)' : content.style.transform = 'translateX(' + (prop + 400) + 'px)';
                }
            }
        }
    },
}
pageTrunning.init();

css:

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    user-select: none;
}
.wrapper{
    width: 400px;
    height: 600px;
    position: absolute;
    left: calc(50% - 200px);
    top: 20px;
    border: 10px solid rgb(255, 42, 237);
    border-radius: 20px;
    background-image: linear-gradient(50deg,rgb(0, 217, 255),rgb(76, 250, 120),rgb(255, 255, 147));
    overflow: hidden;
}
#content{
    padding: 10px;
    display: block;
    column-count: 1;
    column-gap: 20px;
    width: auto;
    height: 580px;
    font-size: 16px;
    font-weight: bolder;
    cursor: move;
    transition-duration: 0.5s;
}
.wrapper a{
    display: inline-block;
    width: 400px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: blue;
    line-height: 600px;
    cursor: pointer;
}

html:

<!DOCTYPE html>
<html lang="content">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滑动翻页</title>
    <link rel="stylesheet" href="./css/main.css">
</head>

<body>
    <div class="wrapper"><a id="start">开始阅读</a></div>
</body>
<script src="./js/data.js"></script>
<script src="./js/main.js"></script>

</html>