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

前端

发布日期: 2019-03-12

文章字数: 492

阅读时长: 2 分

阅读次数:

今天看大神张鑫旭的文章，有一篇基于CSS3 column多栏布局实现水平滑页翻页交互，
为熟悉column多栏布局写法，模仿起点中文网封装了个jquery拓展方法。如下：

css

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #C4B399;
}

html,
body,
ul,
li {
    padding: 0;
    margin: 0;
}

ul {
    -webkit-columns: calc(100vw - 32px) 1;
    -webkit-column-gap: 16px;
    columns: calc(100vw - 32px) 1;
    column-gap: 16px;
    overflow: visible;
    height: 100%;
    transition: all 0.2s;
}

ul li {
    list-style: none;
    padding: 1em;
    margin: 1em;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    background: #FFFFFF;
    break-inside: avoid;
}

html

<ul></ul>
<div style="display: flex;justify-content: space-between;position: absolute;bottom: 0;width: 100%;">
    <button>前一页</button>
    <button>后一页</button>
</div>

js

依赖：jquery.js

(function () &#123;
    $.extend(&#123;
        pageColumns: &#123;
            init: function (options) &#123;
                var that = this;
                options = options || &#123;&#125;;
                //默认参数
                that.el = options.el || $('ul');
                that.prevBtn = options.prevBtn || $('button').eq(0);
                that.nextBtn = options.nextBtn || $('button').eq(1);
                that.columnGap = options.columnGap || 16;
                that.currentPage = options.currentPage || 0;
                that.sectionIndex = options.sectionIndex || 0;
                that.direction = options.direction || 1;
                that.totalWidth = that.el[0].scrollWidth;
                that.pageWidth = that.el.outerWidth();
                that.page = that.totalWidth / (that.pageWidth + that.columnGap * 2);
                //前一页
                that.prevBtn.on('click', function () &#123;
                    if (that.currentPage) &#123;
                        that.currentPage--;
                        that.el.css('transform', 'translateX(-' + (that.currentPage * (that.pageWidth + that.columnGap)) + 'px)');
                        return;
                    &#125;
                    that.direction = 0;
                    that.sectionIndex--;
                    that.filContent();
                    that.slidePosition();
                &#125;);
                //后一页
                that.nextBtn.on('click', function () &#123;
                    if (that.currentPage < that.page - 1) &#123;
                        that.currentPage++;
                        that.el.css('transform', 'translateX(-' + (that.currentPage * (that.pageWidth + that.columnGap)) + 'px)');
                        return;
                    &#125;
                    that.direction = 1;
                    that.sectionIndex++;
                    that.filContent();
                    that.slidePosition();
                &#125;);
                //初始化
                that.filContent();
                that.slidePosition();
            &#125;,
            filContent: function () &#123;
                var templete = '很长很长的内容......';
                var repeatText = '<li>' + templete.repeat(3) + '</li>';
                var title = '<li>第' + this.sectionIndex + '章</li>';
                this.el.html(title + repeatText.repeat(30));
            &#125;,
            slidePosition: function () &#123;
                var that = this;
                that.el.css('transition', 'unset');
                that.totalWidth = that.el[0].scrollWidth;
                that.page = that.totalWidth / (that.pageWidth + that.columnGap * 2);
                if (that.direction) &#123;
                    that.currentPage = 0;
                &#125; else &#123;
                    that.currentPage = Math.ceil(that.page - 1);
                &#125;
                that.el.css('transform', 'translateX(-' + (that.currentPage * (that.pageWidth + that.columnGap)) + 'px)');
                setTimeout(function () &#123;
                    that.el.css('transition', 'all 0.2s');
                &#125;, 200);
            &#125;
        &#125;
    &#125;);
&#125;)();