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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS3 column 瀑布流佈局CSSS3
- jQuery實現瀑布流佈局jQuery
- 原生 js 實現瀑布流佈局、React 版本的瀑布流佈局元件JSReact元件
- CSS display: flex佈局CSSFlex
- display:flex 彈性佈局Flex
- 淺談CSS3中display屬性的Flex佈局CSSS3Flex
- Bootstrap實戰 - 瀑布流佈局boot
- CSS:彈性佈局(display:flex)CSSFlex
- 淺談CSS3中display屬性的Flex佈局(轉)CSSS3Flex
- flutter瀑布流佈局Flutter
- css3 flex 佈局CSSS3Flex
- 談談實現瀑布流佈局的幾種思路
- CSS3之flex佈局CSSS3Flex
- 淺析瀑布流佈局原理
- 佈局之: flex(CSS3新增)FlexCSSS3
- 原生js實現圖片瀑布流佈局,註釋超詳細JS
- 聖盃佈局進階版-flex佈局實現Flex
- flex佈局實戰Flex
- html頁面實現聖盃佈局flexHTMLFlex
- css實現瀑布流CSS
- 卡片瀑布流實現
- vue實現瀑布流Vue
- CSS佈局–聖盃佈局和雙飛翼佈局以及使用Flex實現聖盃佈局CSSFlex
- Flex佈局Flex
- flex 佈局Flex
- display:flex佈局下white-space:nowrap失效問題解決Flex
- 用Flex實現常見的幾種佈局Flex
- 瀑布流簡單實現
- css flex佈局CSSFlex
- flex佈局原理Flex
- 浮動佈局 和 flex佈局Flex
- Flex佈局語法與實踐Flex
- CSS3 Flex 彈性佈局例項程式碼詳解CSSS3Flex
- dispaly的Grid佈局與Flex佈局Flex
- Flex佈局-子項Flex
- flex佈局——轉載Flex
- flex佈局學習Flex
- 淺談Flex佈局Flex