前端瀑布流布局

官方链接地址：https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md
1.安装 npm install vue-waterfall2@1.8.20 --save （提示：一定要安装1.8.20，最新版会有一部分问题）
2.打开main.js文件
import waterfall from ‘vue-waterfall2’
Vue.use(waterfall)
3、

<template>
    <div class="container-water-fall water-content">
        <div class="book">运动书籍</div>
        <waterfall :col="col" :data="data" @loadmore="loadmore">
            <template>
                <div class="cell-item" v-for="(item,index) in data" :key="index">
                    <img v-if="item.img" :src="item.img" alt="加载错误">
                    <div class="item-body">
                        <div class="item-desc">{{item.title}}</div>
                        <div class="item-footer">
                            <!-- <div v-if="item.avatar" class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
                            <div class="name">{{item.user}}</div>
                            <div class="like" :class="item.liked?'active':''">
                                <i></i>
                                <div class="like-total">{{item.like}}</div>
                            </div> -->
                            <div class="wrapper-text">
                                <div class="author">{{item.author}}</div>
                                <div class="price">{{item.price}}</div>
                            </div>
                            <div class="like" v-if="item.like"><van-icon name="like-o" style="margin-right: .1rem"></van-icon>{{item.like}}</div>
                            <div class="see">查看详情</div>
                        </div>
                    </div>
                </div>
            </template>
        </waterfall>
        <loading :show="loading" />
    </div>
</template>

<script>
import loading from "./homeload"
export default {
  components: {
    loading
  },
  data() {
    return {
      data: [],
      col: 2,
      loading: true,
      originData: []
    };
  },
  computed: {
    itemWidth() {
      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 10 * 0.5 * (document.documentElement.clientWidth / 375);
    }
  },
  methods: {
    // reset() {
    //   this.data = [];
    // },
 
    // switchCol(col) {
    //   this.col = col;
    // },
 
    loadmore() {
      this.loading = true
      setTimeout(() => {
        this.data = this.data.concat(this.originData, this.originData);
        this.loading = false;
      }, 1000);
    },
    getData () {
        this.axios.get('/api/data.json').then(res => {
            this.originData = res.getData
            this.data = this.originData;
            setTimeout(() => {
               this.loading = false
            }, 1000);
        })
    }
  },
  mounted() {
    this.getData()
  }
};
</script>

<style  lang="scss" scoped>
.container-water-fall {
// padding: 0 28px;
    box-sizing: border-box;
    padding: 0 .2rem;
    margin: 0 0 1rem 0;
.water-content {
    overflow: hidden;
}
  .book{
      font-size: 18px;
      font-weight: bold;
      padding: .2rem 0;
  }
  .cell-item {
    width: 96%;
    background:#aadd1e;
    box-sizing: border-box;
    border-radius: 6px;
    margin-top: 10px;
    padding: .2rem;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
    .item-body {
      .item-desc {
        font-size: 14px;
        color: #000;
        line-height: .5rem;
        margin: .2rem 0;
        height: 1rem;
        overflow: hidden;
        text-indent: .4rem;
        text-align: justify;
      }
      .item-footer {
        position: relative;
        line-height: .4rem;
        .wrapper-text{
            display: flex;
            justify-content: space-between;
        }
        .author {
            font-size: .28rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: bold;
        }
        .price{
            color: red;
            font-size: .32rem;
            margin-left: .4rem;
        }
        .see{
            color: blue;
            text-align: right;
            margin-top: .2rem;
        }
        .like{
          color:#2196f3;
          margin-top: .3rem;
        }
      }
    }
  }
}
.githubdata {
  float: right;
  margin-right: 90px;
  img {
    width: 14px;
    // height: 16px;
  }
}
</style>