vue-waterfall-simply v0.1.0

vue-waterfall-simply

Usage

Install

npm i vue-waterfall-simply -S

Import

  import Vue from 'vue'
  import WaterFall from 'vue-waterfall-simply'

  Vue.use(WaterFall)

use in component

  import WaterFall from 'vue-waterfall-simply'

  export default {
    components: {
      WaterFall
    }
  }

Example

  <template>
  <div class="img-list">
    <WaterFall
      :data="imgList"
      :item-width="285"
    >
      <template slot-scope="item">
        <div class="img-item">
          <img :src="item.src" alt="">
        </div>
      </template>
    </WaterFall>
    <div class="btn-add-more" @click="getImgList">
      添加更多
    </div>
  </div>
</template>

<script>
import WaterFall from 'vue-waterfall-simply'
import axios from 'axios'

export default {
  components: {
    WaterFall
  },
  data () {
    return {
      imgList: []
    }
  },
  mounted () {
    this.getImgList()
  },
  methods: {
    getImgList () {
      axios.get('/imgList.json')
        .then((res) => {
          this.imgList = this.imgList.concat(res.data.imgList)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.img-item {
  border-radius: 5px;
  box-shadow: 0px 0px 9px 3px #c3c1c1;
  overflow: hidden;
  transition: all .6s ease;

  img {
    width: 100%;
    height: auto;
  }
}

.btn-add-more {
  position: relative;
  top: 0;
  margin-top: 10px;
  text-align: center;
  line-height: 30px;
  padding: 5px 0;
  border: 1px solid #d6d6d6;
  cursor: pointer;
  transition: all .3s linear;
  border-radius: 4px;

  &:hover {
    top: -5px;
    box-shadow: 0px 6px 15px 1px #d6d6d6;
    border-color: #fff;
  }
}
</style>

Props