0
点赞
收藏
分享

微信扫一扫

jenkins 启动linux节点时 控制台中文显示问号乱码

绪风 04-12 14:00 阅读 3
前端

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

问题概述:

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

解决方案:

//外部容器
.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 ||



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

举报

相关推荐

0 条评论