uniapp 瀑布流

瀑布流"/>

uniapp 瀑布流

组件

<template><view class="shop-cell"><image v-if="index == 0" class="shopItem" src="../../static/logo.png"></image><view class="flex"><view else class="shopItemDefault"><image class="shopimg" src="../../static/shuijiao.jpg"></image><view class="cell-title">淘气城堡</view></view></view></view>
</template><script>
export default {props: {shopListItem: '',index: ''}
};
</script><style>
.shopItem {width: 44.85vw;height: 44.85vw;background: #ffffff;border-radius: 6upx;
}
.shopItemDefault {width: 44.85vw;height: 52.332vw;background: #ffffff;border-radius: 6upx;
}
.shopimg {width: 44.85vw;height: 29.904vw;
}
.shop-cell{margin-top: 2.67vw;border-radius: 6upx;overflow: hidden;
}
.cell-title{font-size: 3.738vw;padding: 4vw 2.67vw 0 2.67vw;
}
</style>

使用 

<!-- 列表start --><view class="flex justify-between shopListbox"><view class="left"><view v-if="item.id % 2 != 0" v-for="(item, index) in shopList" :key="index"><ShopList :shopListItem="item" :index="index"></ShopList></view></view><view class="right"><view v-if="item.id % 2 == 0" v-for="(item, index) in shopList" :key="index"><ShopList :shopListItem="item" :index="index"></ShopList></view></view><!-- <view v-for="(item, index) in shopList" :key="index"></view> --></view><!-- 列表end -->