c语言switch瀑布流,小程序简单两栏瀑布流效果

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次放入到高度最低的那一栏。

所谓简单，是指只考虑图片，图片之外的其他元素高度固定，不在考虑范围内。

说一下基本的实现思路：

加载列表数据

在一个隐藏的view中加载图片，通过image组件的bindload获取图片的实际宽高并存储

等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度

我也考虑过在第二步bindload获取到宽高后就直接插入到栏位中，但是会出现小的图片先加载完先出现到页面中，虽然瀑布流不是普通的列表那样的排序，但是也不能小的图片在上面这样太乱顺序，所以就改成了获取宽高先存储，等所有图片加载完成后再往页面上渲染。

来看看实际的代码

不需要渲染到wxml中的数据，我放到了jsData中，主要是两栏的高度和是否在加载数据的标记。

tempPics是第一次加载的数据，临时存放，用于加载图片宽高

columns是两个栏位的实际展示数据

jsData: {

columnsHeight: [0, 0],

isLoading: false

},

data: {

columns: [

[],

[]

],

tempPics: []

}

1、加载列表数据 这一步没什么好说的，主要是触发方式，我的代码里是放在页面加载以及拉到页面底部时触发

onLoad: function() {

this.loadData()

},

onReachBottom: function() {

this.loadData()

}

加载后将列表数据存到tempPics中，用于页面加载获取宽高

2、在一个隐藏的view中加载图片，通过image组件的bindload获取图片的实际宽高并存储

主要是image组件的bindload来获取实际宽高，这里还增加了binderror，防止出现图片加载出错的时候卡死

loadPic: function(e) {

var that = this,

data = that.data,

tempPics = data.tempPics,

index = e.currentTarget.dataset.index

if (tempPics[index]) {

//以750为宽度算出相对应的高度

tempPics[index].height = e.detail.height * 750 / e.detail.width

tempPics[index].isLoad = true

}

that.setData({

tempPics: tempPics

}, function() {

that.finLoadPic()

})

}

获取到宽高后，以750为宽度计算出相对应的高度并存储，然后增加一个加载完成的标记。加载出错后就强制高度为750，这样展示的时候就是一个正方形。

单个图片加载完成并存储后调用finLoadPic方法来判断所有图片是否都加载完成。

遍历列表，只要有一个图片没有加载完成的标记，就判断为没有加载完成。 加载完成后进入下一步。

finLoadPic: function() {

var that = this,

data = that.data,

tempPics = data.tempPics,

length = tempPics.length,

fin = true

for (var i = 0; i < length; i++) {

if (!tempPics[i].isLoad) {

fin = false

break

}

}

if (fin) {

wx.hideLoading()

if (that.jsData.isLoading) {

that.jsData.isLoading = false

that.renderPage()

}

}

}

3、等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度

这里需要再便利一遍列表，根据当前栏位的高度情况，将图片插入到高度底的那一栏，同时把这一栏高度加上当前图片的高度(不是实际高度，是上一步以750为宽度算出来的高度)

renderPage: function() {

var that = this,

data = that.data,

columns = data.columns,

tempPics = data.tempPics,

length = tempPics.length,

columnsHeight = that.jsData.columnsHeight,

index = 0

for (var i = 0; i < length; i++) {

index = columnsHeight[1] < columnsHeight[0] ? 1 : 0

columns[index].push(tempPics[i])

columnsHeight[index] += tempPics[i].height

}

that.setData({

columns: columns,

tempPics: []

})

that.jsData.columnsHeight = columnsHeight

}

在wxml中展示的时候image组件的mode要使用widthFix，同时wxss中图片的高度和宽度一样，这样加载出错的图片可以正方形展示

11月21日增加：

根据网友@杨泉的建议，也尝试了使用wx.getImageInfo来获取图片的宽高(点击查看具体代码)，代码也精简了很多。但是实际比较下来速度要比用image组件慢，初步推测原因是wx.getImageInfo会返回本地路径，多了写本地临时文件的时间

ps：用到瀑布流的地方，最好能后端直接返回图片的宽高，省去小程序端获取宽高的麻烦

再ps：我个人并不建议小程序端使用瀑布流