小程序简单两栏瀑布流效果的实现
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次放入到高度最低的那一栏。
先上代码：https://developers.weixin.qq.com/s/Fgm5s1mz7Wdm
所谓简单，是指只考虑图片，图片之外的其他元素高度固定，不在考虑范围内。
说一下基本的实现思路：
1、加载列表数据
2、在一个隐藏的view中加载图片，通过image组件的bindload获取图片的实际宽高并存储
3、等所有图片加载完成后遍历列表，将图片插入到高度低的那一栏，同时更新该栏高度
我也考虑过在第二步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获取图片的实际宽高并存储
<view class="hide">
<image wx:for="{{tempPics}}" src="{{item.pic}}" bindload="loadPic" binderror="loadPicError" data-index="{{index}}" />
</view>
主要是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：我个人并不建议小程序端使用瀑布流
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了微信小程序按钮点击跳转页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了Javascript实现div层渐隐效果的方法,涉及javascript操作页面元素与样式变化的相关技巧,需要的朋友可以参考下2015-05-05
大家用cnblogs,csdn博客发布技术文档的时候，可以用下面的代码实现运行功能。当然大家看了源码就会发现其实方法还有很多。有更好的方法就发布一下啊。2009-11-11
2009-03-03
uniapp官方虽然提供了uni-data-checkbox,含括了单选和多选框功能,但是它功能是在不能满足需求,下面这篇文章主要给大家介绍了关于uniapp中单选按钮的实现代码,需要的朋友可以参考下2023-01-01
JS动画，实质是对DOM样式的改变。只要把主流浏览器DOM元素的属性方法搞清楚，做JS动画并不算难2011-11-11
这篇文章主要介绍了JS使用for in有序获取对象数据,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
身份证有效性验证的方法有很多，在本文将为大家介绍下如何使用js简单实现下，感兴趣的朋友可以参考下2013-10-10
随机颜色和颜色格式是我们在开发中经常要用到的一个小功能，网上相关的资料也很多，想着有必要总结一下自己的经验。所以这篇文章主要介绍了JS实现随机颜色的3种方法与颜色格式的转化,需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要为大家详细介绍了JS实现容器模块左右拖动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论