继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

CSS3实现瀑布流布局(display: flex/column-count/display: grid)

向建峰_Javan
关注TA
已关注
手记 110
粉丝 1.5万
获赞 5278

前言

在css3到来之前,都是用js来操作dom元素,计算位置,大小,形成瀑布流布局。但是有了css3之后,一切实现起来就太简单了,没有复杂的逻辑,轻松的几行样式代码就可以搞定。

回顾以前(js瀑布流)

基于waterfall.js(11.8kb),还得写入基础的样式,初始化等等,对比其他js,已经是很简单了。

var waterfall = new WaterFall({
	container: '#waterfall',
	pins: ".pin",
	loader: '#loader',
	gapHeight: 20,
	gapWidth: 20,
	pinWidth: 216,
	threshold: 100
});

但是,有了css3,再简洁的js,都比不过简单的css代码。

display: flex

关键点,横向 flex 布局嵌套多列纵向 flex 布局,使用了 vw 进行自适应缩放

// pug 模板引擎
div.g-container
    -for(var i = 0; i<4; i++)
        div.g-queue
            -for(var j = 0; j<8; j++)
                div.g-item

不熟悉pug模板(jade)的,可以先去了解一下。其实看大致也就懂了,就是循环多个元素,没有复杂的逻辑。

$lineCount: 4;
$count: 8;

// 随机数(瀑布流某块的高度)
@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

.g-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    overflow: hidden;
}

.g-queue {
    display: flex;
    flex-direction: column;
    flex-basis: 24%;

}

.g-item {
    position: relative;
    width: 100%;
    margin: 2.5% 0;
}

@for $i from 1 to $lineCount+1 {
    .g-queue:nth-child(#{$i}) {
        @for $j from 1 to $count+1 {
            .g-item:nth-child(#{$j}) {
                height: #{randomNum(300, 50)}px;
                background: randomColor();
				// 瀑布流某块中间的数字
                &::after {
                    content: "#{$j}";
                    position: absolute;
                    color: #fff;
                    font-size: 24px;
					// 水平垂直居中
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}

预览:

CSS 实现瀑布流布局(display: flex)

column-count

关键点,
column-count: 元素内容将被划分的最佳列数
break-inside: 避免在元素内部插入分页符

// pug 模板引擎
div.g-container
    -for(var j = 0; j<32; j++)
        div.g-item

column-count 看起来比display: flex更科学,模板不需要2层循环,更简洁明了。如果真正用到数据上面,会更好处理。

$count: 32;
// 随机数(瀑布流某块的高度)
@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

.g-container {
    column-count: 4;
    column-gap: .5vw;
    padding-top: .5vw;
}

.g-item {
    position: relative;
    width: 24vw;
    margin-bottom: 1vw;
    break-inside: avoid;
}

@for $i from 1 to $count+1 {
    .g-item:nth-child(#{$i}) {
        height: #{randomNum(300, 50)}px;
        background: randomColor();

        &::after {
            content: "#{$i}";
            position: absolute;
            color: #fff;
            font-size: 2vw;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

预览:

CSS 实现瀑布流布局(column-count)

display: grid

关键点,
使用 grid-template-columns、grid-template-rows 分割行列
使用 grid-row 控制每个 item 的所占格子的大小

// pug 模板引擎
div.g-container
    -for(var i = 0; i<8; i++)
            div.g-item

样式

$count: 8;
// 随机数(瀑布流某块的高度)
@function randomNum($max, $min: 0, $u: 1) {
    @return ($min + random($max)) * $u;
}
// 随机颜色值
@function randomColor() {
    @return rgb(randomNum(255), randomNum(255), randomNum(255));
}

.g-container {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

@for $i from 1 to $count+1 {
    .g-item:nth-child(#{$i}) {
        position: relative;
        background: randomColor();
        margin: 0.5vw;

        &::after {
            content: "#{$i}";
            position: absolute;
            color: #fff;
            font-size: 2vw;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.g-item {
    &:nth-child(1) {
        grid-column: 1;
        grid-row: 1 / 3;
    }
    &:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / 4;
    }
    &:nth-child(3) {
        grid-column: 3;
        grid-row: 1 / 5;
    }
    &:nth-child(4) {
        grid-column: 4;
        grid-row: 1 / 6;
    }
    &:nth-child(5) {
        grid-column: 1;
        grid-row: 3 / 9;
    }
    &:nth-child(6) {
        grid-column: 2;
        grid-row: 4 / 9;
    }
    &:nth-child(7) {
        grid-column: 3;
        grid-row: 5 / 9;
    }
    &:nth-child(8) {
        grid-column: 4;
        grid-row: 6 / 9;
    }
}

display: grid样式上面感觉也不好用,需要书写很多grid-columngrid-row

预览:

CSS 实现瀑布流布局(display: grid)

总结

通过,这3种CSS瀑布流布局,你更喜欢哪一种呢?

个人更喜欢column-count,看起来更加清晰,容易理解,代码量也很少。

打开App,阅读手记
5人推荐
发表评论
随时随地看视频慕课网APP

热门评论

有那种css模型学习的网站嘛,就是网站有各种各样的模型,自己写代码

查看全部评论