亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

什么是瀑布流？

看一張圖，以下圖片來(lái)源于花瓣網(wǎng)截圖：

如上圖所示，瀑布流就是讓內(nèi)容按列顯示，自動(dòng)填充空白。

使用 column 實(shí)現(xiàn)瀑布流

源碼：

<div class="masonry">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>
<style>
:root{
  --item-bg-1: #ff4757;
  --item-bg-2: #cea442;
  --item-bg-3: #18005f;
  --counter-bg: #dedede;
}
.masonry {
  column-count: 1;
  column-gap: 20px;
  /* 重置計(jì)數(shù)器 */
  counter-reset: item-counter;
  
}
/* 使用媒體查詢(xún)處理不同視口寬度顯示不同列數(shù) */
@media screen and (min-width: 400px) {
  .masonry {
    column-count: 2;
  }
}
@media screen and (min-width: 600px) {
  .masonry {
    column-count: 3;
  }
}
@media screen and (min-width: 800px) {
  .masonry {
    column-count: 4;
  }
}
@media screen and (min-width: 1200px) {
  .masonry {
    column-count: 5;
  }
}
.item {
  box-sizing: border-box;
  break-inside: avoid;
  margin: 0 0 20px;
  /* css 計(jì)數(shù)器 */
  counter-increment: item-counter;
  position: relative;
}
/* 顯示計(jì)數(shù)器 */
.item:before {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 0;
  min-width: 2em;
  text-align: center;
  background-color: var(--counter-bg);
  content: counter(item-counter);
}
/* 給 item 設(shè)置不同的高度和背景色 */
.item:nth-child(7n+1) {
  height: 151px;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+2) {
  height: 187px;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+3) {
  height: 289px;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+4) {
  height: 123px;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+5) {
  height: 234px;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+6) {
  height: 188px;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+7) {
  height: 149px;
  background-color: var(--item-bg-1);
}
</style>

效果：

視口寬度大于 1200px 時(shí)，顯示 5 列：

視口寬度在 600px-800px 之間時(shí)，顯示 3 列：

column 相關(guān)屬性

column-count

column-count 聲明顯示多少列。默認(rèn)值為 auto，由瀏覽器自己決定。

column-fill

column-fill 控制元素內(nèi)容分成列時(shí)的平衡方式。有效值：auto（按順序填充列）、balance（僅最后一頁(yè)內(nèi)容平均分配到各列）、balance-all（全部分頁(yè)內(nèi)容平均分配到各列）。

column-gap

column-gap 設(shè)置列間隔。默認(rèn)值 normal 表示列間距占用 1em 寬度。

column-rule

column-rule 簡(jiǎn)寫(xiě)屬性，包含 column-rule-width、column-rule-style 和 column-rule-color 。

column-rule-width 設(shè)置線條寬度。
column-rule-style 與 border-style 一樣，支持值：none 、 hidden 、 dotted 、 dashed 、 solid 、 double 、 groove 、 ridge 、 inset 、 outset。
column-rule-color 設(shè)置線條顏色。

column-span

column-span 設(shè)置子元素是否跨列顯示。有效值：none（不跨列）、all（跨列）。

column-width

column-width 設(shè)置列的寬度。瀏覽器會(huì)自動(dòng)調(diào)整寬度大小，如果設(shè)置的寬度連兩列都放不下，會(huì)自動(dòng)變?yōu)橐涣酗@示（如圖三）。

columns

columns 簡(jiǎn)寫(xiě)屬性，可組合設(shè)置 column-width 和 column-count 屬性。

grid 實(shí)現(xiàn)瀑布流

源碼：

<div class="masonry">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>
<style>
:root{
  --item-bg-1: #ff4757;
  --item-bg-2: #cea442;
  --item-bg-3: #18005f;
  --counter-bg: #dedede;
}
.masonry {
  display: grid;
  grid-gap: 20px;
  grid-auto-flow: dense row;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: minmax(50px, auto);
  /* 重置計(jì)數(shù)器 */
  counter-reset: item-counter;
}
.item {
  box-sizing: border-box;
  /* css 計(jì)數(shù)器 */
  counter-increment: item-counter;
  position: relative;
}
/* 顯示計(jì)數(shù)器 */
.item:before {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 0;
  min-width: 2em;
  text-align: center;
  background-color: var(--counter-bg);
  content: counter(item-counter);
}
/* 給 item 設(shè)置不同的高度和背景色 */
.item:nth-child(7n+1) {
  grid-row: 1 / 4;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+2) {
  grid-row: 1 / 3;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+3) {
  grid-row: 1 / 4;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+4) {
  grid-row: 4 / 7;
  background-color: var(--item-bg-1);
}
.item:nth-child(7n+5) {
  grid-row: 3 / 9;
  background-color: var(--item-bg-2);
}
.item:nth-child(7n+6) {
  grid-row: 4 / 8;
  background-color: var(--item-bg-3);
}
.item:nth-child(7n+7) {
  grid-row: 7 / 11;
  background-color: var(--item-bg-1);
}
</style>

效果：

寫(xiě)在最后

在多列布局方面 column 屬性相比于 flex 和 grid 而言，顯得更有優(yōu)勢(shì)。

雖說(shuō) grid 也能做出瀑布流效果，不過(guò)需要指定每個(gè)網(wǎng)格單元的占用大小。

column 雖然不用控制每個(gè)子項(xiàng)的大小，但它的子元素排列順序是從上到下排列，并不是從左往右，這種情況如果數(shù)據(jù)存在分頁(yè)加載時(shí)候，就會(huì)出現(xiàn)內(nèi)容重新排列導(dǎo)致內(nèi)容閃動(dòng)。

在瀑布流布局這個(gè)需求場(chǎng)景下，CSS 多多少少還是有點(diǎn)弱雞~~必要時(shí)候還是只有祭出 JS 。

其他相關(guān)資料：

break-* 控制多列布局如何中斷換列： https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-inside

?轉(zhuǎn)自https://www.cnblogs.com/linx/p/18867615