小程序简单两栏瀑布流效果的实现


Posted in Javascript onDecember 18, 2019

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

先上代码: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:我个人并不建议小程序端使用瀑布流

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
JS处理一些简单计算题
Feb 24 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
WEEX环境搭建与入门详解
Oct 16 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 #Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 #Javascript
使用JS来动态操作css的几种方法
Dec 18 #Javascript
基于ts的动态接口数据配置的详解
Dec 18 #Javascript
H5实现手机拍照和选择上传功能
Dec 18 #Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 #Javascript
js实现上传图片并显示图片名称
Dec 18 #Javascript
You might like
PHP file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
2018/01/05 NodeJs
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
javascript实现电商放大镜效果
2020/11/23 Javascript
Python中集合类型(set)学习小结
2015/01/28 Python
Python实现批量修改文件名实例
2015/07/08 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
python进行TCP端口扫描的实现
2018/12/21 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
python3正则模块re的使用方法详解
2020/02/11 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
CSS3美化表单控件全集
2016/06/29 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
大学生创业项目方案
2014/03/08 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书