<template>
<div class="container">
  <div class="waterfall">
    <div class="item"  v-for="index in 17" :key="index">
      <span class="index">{{index}} </span>
      <img :src="`https://shuliqi.github.io/xiaozhan/${index +1}.jpeg`"/>
    </div>
  </div>
</div>
</template>
<style lang="scss">
.container {
  width: 400px;
  height: 800px;
  overflow-y: scroll;
  border: 1px solid #e6e6e6;
  margin: 50px auto;

    .waterfall{
      // 主要的代码段开始
      column-count: 2;
      column-gap: 10px;
      -webkit-column-count: 2;
      -webkit-column-gap: 10px;
      -webkit-column-gap: 10px;
      // 主要的代码段结束

      .item {
        position: relative;
        margin-top: 10px;

        .index {
          position: absolute;
          top: 10px;
          background: #000;
          color: #fff;
          padding: 5px 10px;
        }

        img {
          display: block;
          width: 100%;
        }
      }
    }
  }
</style>