JavaScript 方式

<div class="wrapper">
    <div class="wf-item">
      <img src="xxx.jpg" class="wf-img" />
    </div>
    <div class="wf-item">
      <img src="xxx.jpg" class="wf-img" />
    </div>
    ...
</div>

<style>
.wrapper {
    position: relative;
}
.wf-item {
    position: absolute
}
.wf-img {
  width: 100%;
  height: 100%;
}
</style>


<script>
function waterFall(column, gap) {
  const items = docuquery.querySelectorAll('item');
  items.forEach((item, index) => {
      if (index < column) {
          item.style.top = 0;
          item.style.left = (columnWidth + gap) * index
      }
  })

}

</script>