瀑布流布局

小鬼buster

已于 2024-04-11 16:23:54 修改

阅读量549

点赞数 3

CC 4.0 BY-SA版权

分类专栏：杂项文章标签：前端

于 2024-04-11 16:16:39 首次发布

本文链接：https://blog.csdn.net/weixin_39225682/article/details/137638595

杂项专栏收录该内容

1 篇文章

订阅专栏

文章介绍了瀑布流布局的概念和在网页设计中的应用，提供了使用CSS`column-count`和`inline-block`创建两列布局的方法。同时，针对淘宝京东等购物网站的商品高度不同，作者给出了通过数组操作实现分列并滚动加载的JavaScript代码示例，以及优化图片加载的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

问题概述:

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

解决方案：

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

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