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


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 相关文章推荐
js打开新窗口方法整理
Feb 17 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
js实现密码强度检测【附示例】
Mar 30 Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
React实现todolist功能
Dec 28 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简单备份与还原MySql的方法
2016/05/09 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
python 实现按对象传值
2019/12/26 Python
python 装饰器的基本使用
2021/01/13 Python
python自动生成证件号的方法示例
2021/01/14 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
美容院营销方案
2014/03/05 职场文书
职业规划实施方案
2014/06/10 职场文书
学校教师安全责任书
2014/07/23 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书