下图的瀑布功能如何实现？瀑布流的思考核心是找到每一列中的最小高度，将数据添加到当前列中。图中数据可以简化为如下格式constlist=[{title:'姓名1',content:['a','b','c','d']},{title:'姓名2',content:['a','b','c']}{title:'姓名3',content:['a','b']}]实现图中显示的数据是四列，所以我们需要初始化一个四列数组数据。同时需要一个数组来保留当前每一列的高度，也初始化为0。constclassifyColumns=[[],[],[],[]]constcolHeight=[0,0,0,0]一开始的误区是自动获取渲染卡片的高度。这个时候，数据还没有整理好。显然不合理。观察图中的样式，可以看出每一项的高度其实是固定的，完全可以计算出来的。list.forEach((item)=>{//获取每一列的最小高度constminColHeight=Math.min(...colHeight)//获取当前最小高度的列constrowIndex=colHeight.indexOf(minColHeight)//把数据推送到当前最小列classifyColumns[rowIndex].push(item)//更新当前列的高度colHeight[rowIndex]=colHeight[rowIndex]+this.calcWaterfallHeight(item)})//calcWaterfallHeight根据当前item计算当前卡片高度最后使用classifyColumns渲染数据。最终代码计算：{//瀑布数据处理classifyColumns(){constcolHeight=[0,0,0,0]constclassifyColumns=[[],[],[],[]]this.list.forEach((item)=>{constminColHeight=Math.min(...colHeight)constrowIndex=colHeight.indexOf(minColHeight)classifyColumns[rowIndex].push(item)colHeight[rowIndex]=colHeight[rowIndex]+this.calcWaterfallHeight(item)})返回classifyColumns}},`
