微信小程序实现瀑布流布局与无限加载的方法详解


Posted in Javascript onMay 12, 2017

前言

瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。

在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插件,轻松做出这样的布局形式。在微信小程序中,我们也可以做出这样的效果,不过由于小程序框架的一些特性,在实现思路上还是有一些差别的。

今天我们就来看一下如何在小程序中去实现这种瀑布流布局:

微信小程序实现瀑布流布局与无限加载的方法详解
小程序瀑布流布局

我们要实现的是一个固定2列的布局,然后将图片数据动态加载进这两列中(而加载进来的图片,会根据图片实际的尺寸,来决定到底是放在左列还是右列中)。

/* 单个图片容器的样式 */
.img_item {
 width: 48%;
 margin: 1%;
 display: inline-block;
 vertical-align: top;
}

我们知道,在HTML中,我们要动态加载图片的话,通常会使用new Image()创建一个图片对象,然后通过它来动态加载一个url指向的图片,并获取图片的实际尺寸等信息。而在小程序框架中,并没有提供相应的JS对象来处理图片加载。其实我们可以借助wxml中的<image>组件来完成这样的功能,虽然有点绕,但还是能满足我们的功能要求的。

<!-- 在页面上放一个隐藏区域,并用image组件去加载一个或多个图片资源 -->
<view style="display:none">
 <image wx:for="{{images}}" wx:key="id" id="{{item.id}}" src="{{item.pic}}" bindload="onImageLoad"></image>
</view>

我们可以在Page中通过数据绑定,来传递要加载的图片信息到wxml中,让<image>组件去加载图片资源,然后当图片加载完成的时候,通过bindload指定的事件处理函数来做进一步处理。

我们来看一下Page文件中定义的onImageLoad函数。在其中,我们可以从传入的事件对象e上,获取到<image>组件的丰富信息,包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸,计算出同比例缩放后的尺寸。接着,我们可以根据左右两列目前累积的内容高度,来决定把当前加载进来的图片放到哪一边。

let col1H = 0;
let col2H = 0;

Page({

 data: {
  scrollH: 0,
  imgWidth: 0,
  loadingCount: 0,
  images: [],
  col1: [],
  col2: []
 },

 onLoad: function () {
  wx.getSystemInfo({
   success: (res) => {
    let ww = res.windowWidth;
    let wh = res.windowHeight;
    let imgWidth = ww * 0.48;
    let scrollH = wh;

    this.setData({
     scrollH: scrollH,
     imgWidth: imgWidth
    });

    //加载首组图片
    this.loadImages();
   }
  })
 },

 onImageLoad: function (e) {
  let imageId = e.currentTarget.id;
  let oImgW = e.detail.width;   //图片原始宽度
  let oImgH = e.detail.height;  //图片原始高度
  let imgWidth = this.data.imgWidth; //图片设置的宽度
  let scale = imgWidth / oImgW;  //比例计算
  let imgHeight = oImgH * scale;  //自适应高度

  let images = this.data.images;
  let imageObj = null;

  for (let i = 0; i < images.length; i++) {
   let img = images[i];
   if (img.id === imageId) {
    imageObj = img;
    break;
   }
  }

  imageObj.height = imgHeight;

  let loadingCount = this.data.loadingCount - 1;
  let col1 = this.data.col1;
  let col2 = this.data.col2;

  //判断当前图片添加到左列还是右列
  if (col1H <= col2H) {
   col1H += imgHeight;
   col1.push(imageObj);
  } else {
   col2H += imgHeight;
   col2.push(imageObj);
  }

  let data = {
   loadingCount: loadingCount,
   col1: col1,
   col2: col2
  };

  //当前这组图片已加载完毕,则清空图片临时加载区域的内容
  if (!loadingCount) {
   data.images = [];
  }

  this.setData(data);
 },

 loadImages: function () {
  let images = [
   { pic: "../../images/1.png", height: 0 },
   { pic: "../../images/2.png", height: 0 },
   { pic: "../../images/3.png", height: 0 },
   { pic: "../../images/4.png", height: 0 },
   { pic: "../../images/5.png", height: 0 },
   { pic: "../../images/6.png", height: 0 },
   { pic: "../../images/7.png", height: 0 },
   { pic: "../../images/8.png", height: 0 },
   { pic: "../../images/9.png", height: 0 },
   { pic: "../../images/10.png", height: 0 },
   { pic: "../../images/11.png", height: 0 },
   { pic: "../../images/12.png", height: 0 },
   { pic: "../../images/13.png", height: 0 },
   { pic: "../../images/14.png", height: 0 }
  ];

  let baseId = "img-" + (+new Date());

  for (let i = 0; i < images.length; i++) {
   images[i].id = baseId + "-" + i;
  }

  this.setData({
   loadingCount: images.length,
   images: images
  });
 }

})

这里是显示在两列图片的wxml代码,我们可以看到在<scroll-view>组件上,我们通过使用bindscrolltolower设置了事件监听函数,当滚动到底部的时候,会触发loadImages去再加载下一组的图片数据,这样就形成了无限的加载:

<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="loadImages">
 <view style="width:100%">
 <view class="img_item">
  <view wx:for="{{col1}}" wx:key="id">
  <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
  </view>
 </view>
 <view class="img_item">
  <view wx:for="{{col2}}" wx:key="id">
  <image src="{{item.pic}}" style="width:100%;height:{{item.height}}px"></image>
  </view>
 </view>
 </view>
</scroll-view>

好了,挺简单的一个例子,如果你有更好的方法,不吝分享一下哦。

完整代码可以在Github下载:https://github.com/zarknight/wx-falls-layout  也可以通过本地进行下载

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
高亮显示web页表格行的javascript代码
Nov 19 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
在JavaScript中操作数组之map()方法的使用
Jun 09 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
JS实现放大镜效果
Sep 21 Javascript
WebSocket实现简单客服聊天系统
May 12 #Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 #Javascript
详解微信小程序 相对定位和绝对定位
May 11 #Javascript
Vue通过input筛选数据
Oct 26 #Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 #Javascript
jQuery遮罩层实例讲解
May 11 #jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 #Javascript
You might like
PHP 变量类型的强制转换
2009/10/23 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
对pandas中Series的map函数详解
2018/07/25 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python @property及getter setter原理详解
2020/03/31 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
校园文明倡议书
2014/05/16 职场文书
综合测评个人总结
2015/03/03 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
525心理健康活动总结
2015/05/08 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS