小程序瀑布流 column-count

<div class="column2">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x260?text=自定义图片1" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/160x160?text=自定义图片2" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x300?text=自定义图片3" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x200?text=自定义图片4" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x120?text=自定义图片5" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x220?text=自定义图片6" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/160x170?text=自定义图片7" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x320?text=自定义图片8" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x360?text=自定义图片9" alt="">

<img class="item rad8 " mode="widthFix" src="http://iph.href.lu/260x270?text=自定义图片10" alt="">

</div>

 

<style lang="scss" scoped>

.column2{

column-count: 2; // 设置显示2列

column-gap: 10rpx; //设置或检索对象的列与列之间的间隙为2px

width: 100%;

}

.item{

background: #fff;

width: 370rpx;

display: inline-block; /*内部卡片需要设置为inline-block,否则会截断显示，如图一*/

justify-content: center;

flex-direction: column;

align-items: center;

}

</style>