css实现瀑布流

 

下面是react生成的html代码
import React from "react";
import "./Waterfall.css";
export default function MyComponent() {
  return (
    <div class="waterfall">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>
  );
}

下面是css代码
.waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  
  grid-gap: 0.25em; 
  grid-auto-flow: row dense;
  grid-auto-rows: 20px;  
}
.waterfall .item {
  width: 400px;
  background: #222;
  color: #ddd;
}
.waterfall .item:nth-of-type(n+1) {
  grid-row: auto / span 3;
}
.waterfall .item:nth-of-type(n+2) {
  grid-row: auto / span 5;
}
.waterfall .item:nth-of-type(n+3) {
  grid-row: auto / span 5;
}
.waterfall .item:nth-of-type(n+4) {
  grid-row: auto / span 3;
}
.waterfall .item:nth-of-type(n+5) {
  grid-row: auto / span 3;
}
.waterfall .item:nth-of-type(n+6) {
  grid-row: auto / span 5;
}
.waterfall .item:nth-of-type(n+7) {
  grid-row: auto / span 5;
}
.waterfall .item:nth-of-type(n+8) {
  grid-row: auto / span 3;
}

下面是效果