效果圖：
第一步：在自己的項目文件下安裝vue-waterfall2
npm install --save vue-waterfall2
第二步：在main.js中引入
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
第三步：在需要做瀑布流的頁面寫入
<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>
第四步：在script中
????export default{?
?????????data(){?
? ? ? ? ? ? ?return{?
?????????????????dataList:[],?
?????????????????col:'2',?
????????????????page：1
????????????}?
?????},?
????computed: {
? ? ????? itemWidth() {
? ? ? ????? return (334 * 0.5 * (document.documentElement.clientWidth / 375))?
????????????//rem布局 計算列寬度
? ? ? ? ? ? //可以根據(jù)自己的rem設(shè)置修改這里的 334 值
? ? ????? },
? ? ? ????gutterWidth() {
? ? ? ????? return (36 * 0.5 * (document.documentElement.clientWidth / 375))?
????????????//rem布局 計算x軸方向margin(y軸方向的margin自定義在css中即可)
????????????//可以根據(jù)自己的rem設(shè)置修改這里的 36 值
? ? ?????},
? ? ????},
????methods: {
? ??????//布局
? ? ? ????scroll(scrollData) {
? ? ? ????? // console.log(scrollData)
? ? ? ????},
? ? ????? switchCol(col) {
? ? ? ????? this.col = col
? ? ? ? ????// console.log(this.col)
? ? ? ????},
????????loadmore(index) {
? ? ? ? ? ? //這里是當(dāng)滑動到底部時探熔，再次請求接口罪既，并且傳page养涮，返回的數(shù)據(jù)給dataList賦值
? ? ? ? ? ? //簡單粗暴的有了分頁功能
????????}
?????}
第四步：樣式（根據(jù)自己需要修改）
/* 流式布局 */
? .container-water-fall {
? ? /* // padding: 0 28px; */
? ? padding: 10px 3%;
? ? width: 100vw;
? ? box-sizing: border-box;
? ? /* background: #fafafa !important; */
? }
? .cell-item {
? ? /* width: 100%; */
? ? /* margin-bottom: 18px; */
? ? background: #ffffff;
? ? border-radius: 10px;
? ? overflow: hidden;
? ? box-sizing: border-box;
? ? margin:10% 0;
? }
? .cell-item img {
? ? /*? border-radius: 12px 12px 0 0; */
? ? 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: #999999;
? }
? .tech-list-ll .tab-bottom{
? ? padding:10px 0 !important;
? ? height: 0 !important;
? ? background: #fafafa !important;
? }
其他問題：
????其中我用到屬性
第一次寫簡書他嚷，有問題請多多指教
