布局 - column //报纸文字排列布局 - 《前端杂记》

demo 实现手机端小说翻页

column布局不适合做瀑布流的原因:瀑布流的每次添加都是往高度最低的列添加,然而collumn会让列高的列多,不会主动往列低那一列添加,能让高度较高的列居于多数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 列宽 列数 */
            columns: 30px 10;
            /* 列宽 只不过会根据页面的状态实时改变 */
            column-width: 30px;
            /* 每列间距 */
            column-gap: 20px;
            /* 间距之间的样式 */
            column-rule: 10px solid #f10;
            /* column-rule-width: 10px;
            column-rule-style: solid;
            column-rule-color: #f10; */
        }
        h2{
            /* 可以让一个元素跨越所有的列 类似与文章标题 */
            column-span: all;
        }
    </style>
</head>
<body>
    <div>
        <h2>这是文章头</h2>
        整个人半倚在瓷枕上，放下铜镜，伸手挠了挠束的紧紧的头发，闵元启深深一叹息。
脑海中似乎还是有那场山洪，额角有时还偶然一跳，当时那重重一击，似乎到现在还有抹不掉的阴影。
“真是穿越了呢……”
从一个后世的普通人一穿数百年，成为明朝崇祯年间的试百户，也就是大明朝廷的从六品武官……这个跨度，实在是有点儿太大了。
从衣服，发式，长相……再到身边的人……全都变了。
人是社会动物，脱离了原有的一切，三十来年的奋斗全部归零，家人和朋友都再无见面的可能，这种事，换了谁能立刻接受？
从小在福利院长大，经历颇多后形成的强韧神经拯救了闵元启。称病躲了十来天不见人，到了今天，终于可以接受自己的新身份：皇明南京中军都督府大河卫云梯关守御所试百户，兼领总旗，这是闵元启在大河卫的世袭武职。
<h2>这是文章头</h2>
堂屋里是几套破损严重红木桌椅，上面摆放着陶制茶具，俱不值钱。
屋子中间一张贡桌，上面是落满灰的黄铜五贡，头顶上面是黑色的瓦，木制房梁，上支下摘的窗子，窗框都是精调细作，显示出极佳的品味，只是破损的厉害。桑皮纸制的窗纸已经有多处破损，却并未更换。
因为窗子上糊的是纸，天气冷，窗子关密的很紧，所以屋中显的略暗了些。
里屋墙角是几张高到房梁的大柜子，一张桌子，一张床，都是不值钱的榆木所制，再加上一些零碎东西，就这样，构成了一个完整的世界。
推门而出，外边的庭院倒是不小，俱是用青石板和鹅卵石铺设而成，五开间正堂，两侧偏厢也比普通民居大的多，东西两侧有厨房和茅房，后院还有堆放杂物的柴房，院南是三开间的门房。
一侧厢房廊下摆放着一排兵器，刀枪剑戟都有，墙上是几张反曲弓，墙角是放着箭矢的箭袋和放弓的弓袋。
东西都是正经货色，是匠人精心打造给军官用的，和正堂摆放的那柄长刀一样，都是祖宗留传之物。
    </div>
</body>
</html>

效果图

demo 实现手机端小说翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/demo/css/index.css">
    <script src="/demo/js/jquery-3.5.1.js"></script>
</head>
<body>
    <section class="warpper">
        <div class="container">
            大明崇祯十七年二月初五？”
整个人半倚在瓷枕上，放下铜镜，伸手挠了挠束的紧紧的头发，闵元启深深一叹息。
脑海中似乎还是有那场山洪，额角有时还偶然一跳，当时那重重一击，似乎到现在还有抹不掉的阴影。
“真是穿越了呢……”
从一个后世的普通人一穿数百年，成为明朝崇祯年间的试百户，也就是大明朝廷的从六品武官……这个跨度，实在是有点儿太大了。
从衣服，发式，长相……再到身边的人……全都变了。
人是社会动物，脱离了原有的一切，三十来年的奋斗全部归零，家人和朋友都再无见面的可能，这种事，换了谁能立刻接受？
从小在福利院长大，经历颇多后形成的强韧神经拯救了闵元启。称病躲了十来天不见人，到了今天，终于可以接受自己的新身份：皇明南京中军都督府大河卫云梯关守御所试百户，兼领总旗，这是闵元启在大河卫的世袭武职。
除了世袭官职外，还有两进深的百户官厅一座，百多亩收成有限的近海薄田，名义上，每个月还有七石粮食的俸禄。
而在闵元启的记忆中，俸禄粮早就不发了，一拖数年，一次发上几石就算不错了，明末之时，国家处于风雨飘摇之中，一年千万白银和两千万石的收入，多半用在北方的军务之上，象大河卫这样的卫所，早就无人过问，普通军户穷困潦倒，便是武官的日子也好不到哪去，闵元启记忆中自己少年时家境还算富裕，现在却是温饱也难了。
闵元启掀开身上的被褥，翻身下了坑，再抓起身边的一件半旧棉袍，七手八脚的扣上纽扣，戴上一顶乌纱暖帽，在腰间系上刻着自己姓名和官职的铜牌，蹬上厚实的棉布硬底的官靴，再系上一柄刀鞘包银的腰刀，立刻也就神采奕奕起来。
抓着腰刀时，闵元启感受了一下佩刀的重量，似乎是有六七斤重，抽出看看时，刀身闪亮，刀刃锋锐无比，握着刀把时，右手与刀身似有一种血肉相连的感觉，这柄宝刀是祖传之物，若变卖可得银十余两，不过闵元启知道这是先祖最珍视之物，这些年家道中落，变卖了不少田产事物，这刀却是绝计不卖。
再看两手，遍布老茧，闵元启不过二十一岁，但脑海记忆中是六七岁便开始打熬身体，习武不停，普通的军户愿意操练的不多，但闵元启这样的武职世家子弟，认真习武的还是不少。
闵元启站在屋子正中，看了看四周。
堂屋里是几套破损严重红木桌椅，上面摆放着陶制茶具，俱不值钱。
屋子中间一张贡桌，上面是落满灰的黄铜五贡，头顶上面是黑色的瓦，木制房梁，上支下摘的窗子，窗框都是精调细作，显示出极佳的品味，只是破损的厉害。桑皮纸制的窗纸已经有多处破损，却并未更换。
因为窗子上糊的是纸，天气冷，窗子关密的很紧，所以屋中显的略暗了些。
里屋墙角是几张高到房梁的大柜子，一张桌子，一张床，都是不值钱的榆木所制，再加上一些零碎东西，就这样，构成了一个完整的世界。
推门而出，外边的庭院倒是不小，俱是用青石板和鹅卵石铺设而成，五开间正堂，两侧偏厢也比普通民居大的多，东西两侧有厨房和茅房，后院还有堆放杂物的柴房，院南是三开间的门房。
一侧厢房廊下摆放着一排兵器，刀枪剑戟都有，墙上是几张反曲弓，墙角是放着箭矢的箭袋和放弓的弓袋。
东西都是正经货色，是匠人精心打造给军官用的，和正堂摆放的那柄长刀一样，都是祖宗留传之物。
偏厢的廊檐之上，悬挂着擦拭的雪亮的四块黑色木牌，上面的字体是金漆字样，闵元启记忆中长辈对这四块楹联特别重视，按时擦拭和补漆。
闵元启看着楹联，小声念道：“忆向淮东接晤言，春风曾过玩韬轩。尊前舞剑军容肃，花下投壶语笑喧。奇骨似堪分爵土，壮心俄复厌尘烦。生刍一束无由奠，目断停云绕墓园。”
这其实是一首挽诗，诗名为“挽大河卫闵恭户侯”，闵元启知道这是弘治年间礼部侍郎兼侍读学士程敏政的诗文，诗中凭吊的闵恭户侯是敬称，应该是一位指挥使级别的高级武官，也是闵元启今生的先祖。
程敏政因为唐寅一案被免官，但毕竟还是文官中的显贵，弘治年距今二百余年，闵家还是将这楹联挂在供奉祖先灵牌的房门之前，足见得到这首诗之后闵家先祖是何等的骄傲与自豪。
“尊前舞剑军容肃？”闵元启摇了摇头，诗中描述的情形，和自己现在所处的现实，完全是两个世界了。
“元启哥！”
就在闵元启苦笑的时候，庭院外门被人推开，一个头戴毡帽，穿着一身极肮脏的鸳鸯战袄的青年男子走了进来，在此人的腰间有一块红木腰牌，显示出是小旗官的身份。
在记忆里搜索一下，闵元启知道这个人叫闵元金，是自己总旗下的小旗官，也是自家的堂弟，平素都在闵元启这里点卯应差。
这十几天闵元启心绪不佳，借口生病一直不曾起身出门。
“元启哥，”见闵元启起来，闵元金十分惊喜，不过也没有敢多说什么，只抱拳道：“海边熬的盐早就得了，请元启哥示下，要不要去看看？”
云梯关守御所紧靠着海边，是淮河的入海口，因为与海平面落差较大，每天都能听到淮河水流入海中时的巨响，这里在后世便被称为响水。
整个大河卫分布较广，云梯关这里是最东面的守御所，距离卫指挥衙门所在的淮安府极远，千户所在地方民户虽多，却被山阳，盐城，灌南诸县分管，距离三县的县城也是较远，来往相当不便。
地方上滩涂地和盐碱地较多，农业困难，商业便不发达，是一个相当封闭和落后的地方。
凡事有利有弊，有弊亦可能有利，云梯关这里靠海便是吃海，卫所武官们便是靠着临海煮盐来获取外快。
到了每月的月初，各军户都会把孝敬给武官的盐上缴上来，数目点算清楚后，再贩卖出去。
这些事，闵元启在记忆中一搜索，便是立刻了然。
本月交盐已经因为闵元启生病耽搁了，治下的军户们不把盐交给闵元启，自己也不敢去卖，连这个闵元金在内，都是如此。
怪不得此人一天几次，跑来探视。
“我身体已经好了，这就去看看。”
回忆着闵元启原本说话的口吻，对答的也是毫无滞碍。
两人一前一后出了院门，沿途房舍和街道上的人见闵元启过来，都是打躬行礼。这些人都是他治下的军户，见了闵元启出来，当然是十分恭敬。
天气很冷，闵元启不停向路人点头致意，心中也是在暗自感叹。
短窄的街道上污水横流，垃圾堆积如山。在外玩耍的孩童们衣衫单薄，一个个冻的脸色发青，大人们也是破衣烂衫，都跟叫花子差不多。
原本军户就是国家常设的守备军人，这身上战袄按例是该三年一换的，不过看这些军户身上的战袄，最少也是十年不曾换过了。
沿街房舍都是东倒西歪，不成模样。而且多数是泥墙草舍，只有少数几幢是砖瓦石房。
闵元启的住处是祖产遗留下来，虽不甚佳，但已经是这方圆数里内最好的房子了。
一直向东走了好几里路，海风呼啸已经十分明显，淮河水入海的响声亦十分明显。等闻到一股呛人的烟味时，闵元启知道是到了煮盐的地方了。
攀过一个小土坡，迎面就是一望无边的大海，海水灰褐色，并不似南方的海那般海水碧蓝。沿海有大片的滩涂地，淡水形成的大大小小的湿地遍布水草芦苇，冬末初春时还是一副衰败景像。
在海水拍打的岸边里许处，就有数十个衣衫褴褛的男子和妇人在海边忙碌着。
闵元启感觉到海风扑面，一股咸腥味扑面而来。
极目远眺，沿河南岸有明显的五座城池，并未包砖，俱是夯土为城。闵元启知道这是嘉靖年所筑，当时有奸人勾引倭寇从海口上岸，烧杀抢掠无恶不作，朝廷在此设把总一员，筑土城五座于淮河南岸守备，万历二十年备倭把总移扎海州，这里便只余几座土城和一个形同虚设的守御所。
至百年之后，这里海水倒灌形成滩涂平原，出海口后移百里，云梯海关就只剩下地面，距离出海口很远了。
大河卫这里距离盐城近百里，离山阳，东阳距离较近，但煮盐卖盐手法却是与盐城一带完全相同。
先是“纳潮”。
纳潮颇有讲究，“旱晴天纳潮头，平时纳潮中，雨后纳潮尾，夏秋季纳夜潮”。 围堤纳潮，在海边筑坝围堤，引入海水，七天左右，待海水自然蒸发掉，底部的泥土就蓄含了相当浓度的盐分，之后便可取土备用。
再下一步，便是“制卤”。
以海边的茅草晒干，再用湿土垒成灶，用竹片上搭茅草，铺好之后，就形成了一个天然的盐漏，可以制卤了。
将纳潮收集好的盐泥铺在草上，用大桶取来海水，不停的冲涮盐泥和茅草，过泥草之后，滤出来的便是可用的卤水。
卤水再次过滤，去除杂质，装入坛中沉淀一段时间，就是最后一部煎煮。
用大灶，大型铁锅，先大火猛烧，卤水沸腾之后，文火慢煮，八小时后，水份煮干，白色的盐成型，这就是完整的煮盐之法。
在闵元启眼前，就是古人在海边煮盐的细节全景
        </div>
        <div class="cover">待更新</div>
    </section>
    <script src="/demo/js/index.js"></script>
</body>
</html>

body{
    margin: 0;
    padding: 0;
}
.warpper{
    width: 300px;
    height: 500px;
    border: 1px solid #f10;
    position: absolute;
    left: calc(50% - 150px);
    top: 50px;
    overflow: hidden;
}
.container{
    width: 100%;
    height: 100%;
    columns: 8 300px;
    column-width: 300px;
    column-gap: 20px;
    transition: all .6s;
    outline: none;
    user-select: none;
}
.cover{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    line-height: 500px;
    text-shadow: 3px 3px  #000,
                 -1px -1px  #fff;
    /* opacity: 0; */
    user-select: none;
    /* z-index: -1; */
    display: none;
}

var couunList = $('.container').css('column-count');
var listNum = 0;
$('.container').mousedown(function (e) {
    var disX = e.pageX;
    var nowX = 0;
    $(document).mousemove(function (e) {
        nowX = e.pageX - disX;
    })
    $(document).mouseup(function () {
        $(this).off()
        if (nowX < 0) {
            listNum++;
            if (listNum > couunList - 1) {
                listNum = couunList - 1;
                $('.cover').toggle();
                console.log($('.cover').css('display'))
            }
            var moveX = -320 * listNum;
            $('.container').css({
                transform: 'translateX(' + moveX + 'px' + ')',
            })
        }
        if (nowX > 0) {
            listNum--;
            if (listNum < 0) {
                listNum = 0;
            }
            var moveX = -320 * listNum;
            $('.container').css({
                transform: 'translateX(' + moveX + 'px' + ')',
            })
        }
    })
})
$('.cover').click(function(){
    $(this).toggle()
})