CSS3實現瀑布流佈局(display: flex/column-co
前言
在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%);
}
}
}
}
}
預覽:
演示地址:
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%);
}
}
}
預覽:
演示地址:
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
。
預覽:
演示地址:
總結
透過,這3種CSS瀑布流佈局,你更喜歡哪一種呢?
個人更喜歡column-count
,看起來更加清晰,容易理解,程式碼量也很少。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4289/viewspace-2820178/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- jQuery實現瀑布流佈局jQuery
- 原生 js 實現瀑布流佈局、React 版本的瀑布流佈局元件JSReact元件
- CSS3 column 瀑布流佈局CSSS3
- css3實現的瀑布流佈局程式碼例項CSSS3
- 瀑布流佈局
- Bootstrap實戰 - 瀑布流佈局boot
- 瀑布流佈局實現程式碼詳解
- display:flex 彈性佈局Flex
- flutter瀑布流佈局Flutter
- 淺談CSS3中display屬性的Flex佈局CSSS3Flex
- CSS:彈性佈局(display:flex)CSSFlex
- 瀑布流佈局淺析
- 淺談CSS3中display屬性的Flex佈局(轉)CSSS3Flex
- UIColletionView瀑布流佈局實現思路以及封裝的實現UIView封裝
- ionic3實戰-隨機佈局瀑布流實現隨機
- 談談實現瀑布流佈局的幾種思路
- css3 flex 佈局CSSS3Flex
- 淺析瀑布流佈局原理
- 網頁的瀑布流佈局網頁
- CSS3之flex佈局CSSS3Flex
- AJAX+json+jquery實現預載入瀑布流佈局JSONjQuery
- css3的flex實現的響應式佈局效果CSSS3Flex
- 佈局之: flex(CSS3新增)FlexCSSS3
- display: flex彈性佈局程式碼例項Flex
- 原生js實現圖片瀑布流佈局,註釋超詳細JS
- 聖盃佈局進階版-flex佈局實現Flex
- jQuery瀑布流佈局程式碼例項jQuery
- 使用flex 實現聖盃佈局Flex
- 用flex佈局實現Sticky FootersFlex
- flex佈局實戰Flex
- Android ListView功能擴充套件,實現高效能的瀑布流佈局AndroidView套件
- 5 種常用佈局的 flex 實現Flex
- vue實現瀑布流Vue
- 卡片瀑布流實現
- css實現瀑布流CSS
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- css3的flex彈性佈局實現貼邊均勻等分列表CSSS3Flex
- html頁面實現聖盃佈局flexHTMLFlex