vue瀑布流布局

vue使用瀑布流
npm install --save vue-waterfall2
main.js引入
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
html------------------------
<div class="container-water-fall">
  <waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="dataList" @loadmore="loadmore" @scroll="scroll">
    <template>
      <div class="cell-item" v-for="(item,index) in dataList" :key="index" @click="handelRouter(item.id)">
        <img v-if="item.photo" :src="item.photo" alt="加载错误" />
        <div class="item-body">
          <div class="item-descA">{{item.title}}</div>
          <div class="item-descB">{{item.class}}</div>
        </div>
      </div>
    </template>
  </waterfall>
</div>

data(){
  return{
    dataList:[],
    col:'2',
    page:1
  }
}

computed: {
  itemWidth() {
    return (334 * 0.5 * (document.documentElement.clientWidth / 375))?
    //rem布局 计算列宽度
    //可以根据自己的rem设置修改这里的 334 值
  },
  gutterWidth() {
    return (36 * 0.5 * (document.documentElement.clientWidth / 375))?
    //rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    //可以根据自己的rem设置修改这里的 36 值
  },
},

methods: {
  //布局
  scroll(scrollData) {
    // console.log(scrollData)
  },
  switchCol(col) {
    this.col = col
    // console.log(this.col)
  },
  loadmore(index) {
    //这里是当滑动到底部时,再次请求接口,并且传page,返回的数据给dataList赋值
    //简单粗暴的有了分页功能
  }
}

css样式
.container-water-fall{
  padding: 10px 3%;
  width: 100vw;
  box-sizing: border-box;
}
.cell-item{
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  margin: 15% 0;
  img{
    width: 100%;
    height: auto;
    display: block;
  }
}

.item-descA{
  font-size: 17px;
  color: rgba(46, 44, 42, 1);
  line-height: 17px;
  font-weight: bold;
  margin: 11.5px 0 13px 9px;
}

.item-descB{
  font-size: 12px;
  font-weight: 500;
  color: rgba(89, 89, 89, 1);
  line-height: 17px;
  margin: 11.5px 0 13px 9px;
}

.item-footer{
  margin-top: 22px;
  position: relative;
  display: flex;
  align-items: center;
}

.name{
  max-width: 150px;
  margin-left: 10px;
  font-size: 14px;
  color: #999;
}

.tech-list-ll .tab-bottom{
  padding: 10px 0 !important;
  height: 0 !important;
  background: #fafafa !important;
}

(0)

相关推荐