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


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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
angularJS 入门基础
Feb 09 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
es6中reduce的基本使用方法
Sep 10 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 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 基于文件头的文件类型验证类函数
2012/05/01 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
React diff算法的实现示例
2018/04/20 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python检测网络延迟的代码
2018/05/15 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
乡下人家教学反思
2014/02/01 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
租车协议书
2015/01/27 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP
Python采集壁纸并实现炫轮播
2022/04/30 Python