CSS实现瀑布流（water-fall）

<div class="masonry">
  <div class="item">
    <img src="http://source.unsplash.com/random/400x600"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x300"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x500"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x400"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x700"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x200"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x600"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x500"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x800"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x200"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x600"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x300"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x400"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x600"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x200"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x300"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
  <div class="item">
    <img src="http://source.unsplash.com/random/400x400"/>
    <h2>Title Goes Here</h2>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
      deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
      dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
      quidem?
    </p>
  </div>
</div>

CSS

.masonry {
  width: 100%;
  margin: 20px auto;
  columns: 2;
  column-gap: 30px;

  .item {
    width: 100%;
    break-inside: avoid;
    margin-bottom: 30px;

    img {
      width: 100%;
    }
  }

  h2 {
    padding: 8px 0;
  }

  P {
    color: #555;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
  .masonry {
    width: 96vw;
    columns: 3;
    column-gap: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .masonry {
    width: 96vw;
    columns: 2;
    column-gap: 20px;
  }
}

@media screen and (max-width: 767.98px) {
  .masonry {
    width: 96vw;
    columns: 1;
  }
}