瀑布流 · 前端筆記

[TOC] # 使用flex實現使用 CSS flex 實現瀑布流布局關鍵點，橫向 flex 布局嵌套多列縱向 flex 布局，使用了 vw 進行自適應縮放 HTML： ~~~ // pug 模板引擎 div.g-container -for(var i = 0; i<4; i++) div.g-queue -for(var j = 0; j<8; j++) div.g-item ~~~ SCSS： ~~~ $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 column 實現關鍵點： * column-count: 元素內容將被劃分的最佳列數 * break-inside: 避免在元素內部插入分頁符 HTML： ~~~ // pug 模板引擎 div.g-container -for(var j = 0; j<32; j++) div.g-item ~~~ SCSS： ~~~ $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%); } } } ~~~ # 使用grid實現關鍵點： * 使用`grid-template-columns`、`grid-template-rows`分割行列 * 使用`grid-row`控制每個 item 的所占格子的大小 HTML： ~~~ // pug 模板引擎 div.g-container -for(var i = 0; i<8; i++) div.g-item ~~~ SCSS： ~~~ $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; } } ~~~ # 參考資料 [cssinspirationguide - csc inspiration guide online](https://chokcoco.github.io/CSS-Inspiration/)