瀑布流布局:不需要一行JS代码就可以实现瀑布流

 2021-07-09 2:11    77  

点击右上方红色按钮关注“web秀”瀑布流布局,让你真正秀起来

54CR5biD5rWB5biD5bGAOuS4jemcgOimgeS4gOihjEpT5Luj56CB5bCx5Y+v5Lul5a6e546w54CR5biD5rWB5biD5bGA

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

54CR5biD5rWB5biD5bGAOuS4jemcgOimgeS4gOihjEpT5Luj56CB5bCx5Y+v5Lul5a6e546w54CR5biD5rWB5biD5bGA

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

54CR5biD5rWB5biD5bGAOuS4jemcgOimgeS4gOihjEpT5Luj56CB5bCx5Y+v5Lul5a6e546w54CR5biD5rWB5biD5bGA

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

预览:

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

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

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

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

公告喜欢小编的点击关注,了解更多知识!

源码地址请点击下方“了解更多”

本文标签:

原文链接:https://www.xgfox.com/bcrm/674.html

本文版权:如无特别标注,本站文章均为原创。