对于一些小程序，关于瀑布流的需求是很正常的，瀑布流看起来确实很舒服，但是具体该如何实现呢？

下文给出的方式是： js + css

1. 瀑布流

1.1 什么叫瀑布流?

瀑布流，又称瀑布流式布局。
是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

1.2 瀑布流有什么优点？

• 以图片为主的展示页面
• 图片尺寸不一交错排布
• 空间使用更加充分，节省了空间

1.3 如何实现瀑布流的关键是什么?

根据1.1的解释，可以解析出如下两点:

• 参差不齐: 就是说瀑布流card的高度是不一致的
• 不断加载数据块并附加至当前尾部： 就是说新加载的数据，一直追加到现有数据列表的底部

2. 实现思路

2.1 思路梳理

由1.1、1.2、1.3，相信对于瀑布流已经有了一定的概念，接下来就是如何实现瀑布流。

实现瀑布流的关键点在于:

• 分别存储当前列的渲染数据、高度数据
• 新数据应该往哪一列进行追加

2.2 实现瀑布流

假设场景如下：
这是一个商城类的小程序，只需要两列数据即可。上拉加载数据后，自动排列到两侧对应的列表里。

代码如下：

const app = getApp()
var leftHeight = 0, // 左侧列表累计高度
rightHeight = 0; // 右侧列表累计高度
var commonHeight = 210; // 瀑布流卡片 除图片外的固有高度
Page({
data: {
page: 1,
leftGoods: [], // 左侧列表渲染数据
rightGoods: [] // 右侧列表渲染数据
},
onLoad() {
// 初始化
this.init()
},
init() {
// 初始化两侧累计高度、两侧列表数据
// 重新通过接口获取数据
leftHeight = 0
rightHeight = 0
this.setData({
leftGoods: [],
rightGoods: []
}, () => {
this.getGoodsList();
})
},
// 获取商品数据
getGoodsList() {
const _this = this;
const {
page
} = this.data
app.http.request('/goods-list', {
page
}).then(res => {
const {
ec,
data
} = res
if (ec == 200) {
// 解构出当前存储的数据
const {
leftGoods,
rightGoods
} = this.data
// 对返回值里的数据进行处理
data.list.map(item => {
// 解构出每张图片的宽高值
const {
height,
width
} = item.img
// 计算图片宽高比
const aspectRatio = width / height
// 计算图片真实渲染的高度
let realHeight = 340 / aspectRatio
// 优先给左侧列表添加数据
// 只要左侧累计高度不大于右侧累计高度，就给左侧添加；否则就给右侧添加
// 列表添加数据，对应累计高度也应调整
if (leftHeight <= rightHeight) {
leftGoods.push(item)
leftHeight = leftHeight + realHeight + commonHeight
} else {
rightGoods.push(item)
rightHeight = rightHeight + realHeight + commonHeight
}
// 数据处理完成，进行存储
_this.setData({
leftGoods,
rightGoods,
})
})
} else {
wx.showToast({
icon: 'error',
title: '加载数据失败',
})
}
})
},
// 划到底部 加载更多
lower: app.throttle(function () {
const {
page
} = this.data
this.setData({
page: page + 1
}, () => {
this.getGoodsList()
})
}, 500),
})

现在处理好了要渲染的数据，接下来只需要在页面进行布局渲染即可！

最后

以上就是生动芹菜为你收集整理的微信小程序 - - - - - 瀑布流效果实现1. 瀑布流2. 实现思路的全部内容，希望文章能够帮你解决微信小程序 - - - - - 瀑布流效果实现1. 瀑布流2. 实现思路所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。