您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > css

CSS3实现瀑布流布局

时间:2019-12-06 10:46:24  来源:  作者:

前言

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%);
 }
 }
 }
 }
}

预览:

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

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%);
 }
 }
}

预览:

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

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-column、grid-row。

预览:

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

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

演示地址: 点击文章结尾“了解更多”

总结

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

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



Tags:CSS3 瀑布流   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
前言在css3到来之前,都是用js来操作dom元素,计算位置,大小,形成瀑布流布局。但是有了css3之后,一切实现起来就太简单了,没有复杂的逻辑,轻松的几行样式代码就可以搞定。回顾以前(js...【详细内容】
2019-12-06   CSS3 瀑布流  点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条