瀑布流布局

瀑布流布局：瀑布流，又称瀑布流式布局，是比较流行的一种页面布局，视觉表现为参差不齐的多栏布局。

问题概述:

一次性生成，不需要再次增加，排序顺序由上倒下，由左到右

解决方案：

//外部容器
.aa{
    column-count ：2 定义列数
    column-gap ： 30 列与列之间的间隔
}
 
//aa下应分割的元素
.bb{
    display:inline-block
}

实现图示：

问题概述：

类似淘宝京东等购物网站，商品因展示类型不同，高度不同，可滚动加载

解决方案:

//思路就是把整个列表分成两列，按照从左到右，从上到下的顺序排列
//步骤一:按顺序，将左右分成两列
//例如[1,2,3,4,5,6,7,8,9]分成[1,3,5,7,9]和[2,4,6,8]
this.list.map((item, index) => {
	if (index % 2 != 0) {
		this.rightList.push(item);
	} else {
		this.leftList.push(item);
	}
})
//步骤二:按照分好的列表纵向排列即可
<view>
    <view v-for="(item,index) in leftList" :key="item.id" class="list-item">
        <view :params="item" tag="left" :index="index"></view>
    </view>
</view>
<view>
    <view v-for="(item,index) in rightList" :key="item.id" class="list-item">
        <view :params="item" tag="right" :index="index"></view>
    </view>
</view>
//那么最后的列表就是
// 1 || 2
// 3 || 4
// 5 || 6
// 7 || 8
// 9 ||
 
 
 

实现图示：因为滚动加载的问题，这里其实可以进行优化，将每一个类目按照图片加载完成的顺序逐个加载出来。