vue瀑布流布局（完美方案）

除了小程序瀑布流，当然h5列表的瀑布流布局也是很常见的，今天我们就来盘一下vue版的瀑布流布局方式

安排！

vue版如图：

// 安装组件vue-waterfall2
npn install vue-waterfall2 -S

// main.js 注册使用组件
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

// list.vue
// 说明下：width/单个列表的宽度，gutterWidth/左列表距右侧的边距（博主这里的动态赋值操作可忽略，因为是为了做示例项目的全端适配）
<template>
	<waterfall 
	:col='2' 
	 :width="(W- ((W<500 && W>=400?400:W>=500?500:W)/375*12)*2-((W<500 && W>=400?400:W>=500?500:W)/375*12))/2" 
	 :gutterWidth="(W<500 && W>=400?400:W>=500?500:W)/375*12"  
	 :data="goods" >
	     <template>
	         <div class="cell-item" v-for="(item,index) in goods" :key="index">
	             <cardList2 class="animated fadeInUp" 
	             :id="'#i'+index" 
	             :goods="item" 
	             @click.native="fndetails(item,index)" 
	             />
	         </div>
	     </template>
	 </waterfall>
 </template>


<script>
import cardList2 from '@/components/cardList2.vue'

let leftHeight=0, rightHeight=0
export default {
	data(){
		return {
			W: document.body.clientWidth || document.documentElement.clientWidth,
			leftList:[],
            rightList:[]
		}
	},

}
</script>


// cardList2.vue
<template>
    <div class="c-box rds _list" :style="{ marginBottom: (W<500 && W>=400?400:W>=500?500:W)/375*12 +'px'}">
        <div class="img-box" :style="{ 'height': clientWidth*(34/75) + 'px' }">
            <img :style="{ 'height': clientWidth*(34/75) + 'px' }" v-lazy="goods.firstPic" :key="goods.firstPic"  alt="">
            <div v-if="state!=4">
                <p class="goodStateTip goodStateTipDJS" v-if="state==4.5">
                        <img class="fs12" style="width:.14rem;height:.14rem;margin-right:.01rem;display:inline-block;" src="../assets/biao.png" alt="">
                        <i class="ing-end-time fs10">{{ time.h }}</i>
                        <b>:</b>
                        <i class="ing-end-time fs10">{{ time.m }}</i>
                        <b>:</b>
                        <i class="ing-end-time fs10">{{ time.s }}</i>
                </p>
                <span class="goodStateTip goodStateTipOther" v-else>{{ nowState }}</span>
            </div>
        </div>
        <div class="text-box">
            <p class="fs14 num2" style="margin-bottom:.1rem;" v-html="goods.title"></p>
            <div class="ai" style="padding:.03rem 0;">
                <ul class="tips clear fs8" style="padding:0;margin-bottom:.05rem;" v-if="goods.originalPrice>0.9 &&goods.rebate && state !=5 && state != 6">
                    <li class="left fan red fs10 hongbao" style="padding:.01rem .05rem;">返<i class="fs10">￥</i><span class="n">{{ goods.rebate }}</span></li>
                </ul>
            </div>

            <div class="ai" style="padding:.03rem 0;">
                <div class="fs11 old-price hui">原价<i class="fs10">￥</i><span class="n">{{ formatNum(goods.originalPrice || 0) }}</span></div>
            </div>

            <div class="clear price-box ai">
                <span class="left fs12 red now-price">￥<i class="fs16 bold"><span class="n">{{ formatNum( goods.sellingPrice || 0) }}</span></i></span>
                <span class="right fs12 volume hui">已售<span>{{ goods.salesVolume > 0 ? goods.salesVolume : 0 }}</span></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            W: document.body.clientWidth || document.documentElement.clientWidth,
            nowState:'',
            state:'',
            // 倒计时
            time:{
                h: '00',
                m: '00',
                s: '00'
            },
        }
    },
    props:['goods']
 }
 </script>

小程序瀑布流布局：https://blog.csdn.net/qq_37034928/article/details/106097313