提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!2017-06-05 作者:杨先生
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感。
在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插件,轻松做出这样的布局形式。在微信小程序中,我们也可以做出这样的效果,不过由于小程序框架的一些特性,在实现思路上还是有一些差别的。
今天我们就来看一下如何在小程序(http://www.hishop.com.cn/xiaocx/)中去实现这种瀑布流布局:
小程序瀑布流布局
我们要实现的是一个固定2列的布局,然后将图片数据动态加载进这两列中(而加载进来的图片,会根据图片实际的尺寸,来决定到底是放在左列还是右列中)。
/* 单个图片容器的样式 */.img_item { width: 48%; margin: 1%; display: inline-block; vertical-align: top;
}
我们知道,在HTML中,我们要动态加载图片的话,通常会使用new Image()创建一个图片对象,然后通过它来动态加载一个url指向的图片,并获取图片的实际尺寸等信息。而在小程序框架中,并没有提供相应的JS对象来处理图片加载。其实我们可以借助wxml中的组件来完成这样的功能,虽然有点绕,但还是能满足我们的功能要求的。
我们可以在Page中通过数据绑定,来传递要加载的图片信息到wxml中,让组件去加载图片资源,然后当图片加载完成的时候,通过bindload指定的事件处理函数来做进一步处理。
我们来看一下Page文件中定义的onImageLoad函数。在其中,我们可以从传入的事件对象e上,获取到组件的丰富信息,包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸,计算出同比例缩放后的尺寸。接着,我们可以根据左右两列目前累积的内容高度,来决定把当前加载进来的图片放到哪一边。
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代码,我们可以看到在组件上,我们通过使用bindscrolltolower设置了事件监听函数,当滚动到底部的时候,会触发loadImages去再加载下一组的图片数据,这样就形成了无限的加载:
推荐文章
微信小程序滚动字幕已经是当下微信小程序开发最热门的话题,下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧...
2017年6月14日,微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。...
最近在微信社群都可以看到拼多多的拆红包的界面,这又是一款拼多多的裂变营销方式,很多朋友对此表示很怀疑,到底是不...
Hishop最新消息,有这样一个小程序可以无需询问,就知道朋友的位置了,那么是如何定位分享位置的呢。...
目前最好最受欢迎的收银系统品牌有HiShop友数、商米等,每个品牌都有各自的特点和主要发展的行业,下面小编就为大家来介...
餐饮行业是国内规模万亿级别的市场,如今市面上的餐饮品牌门店数不胜数,在如今这个互联网时代,许许多多餐饮门店都开...
连锁超市在选择收银系统的时候,首先会考虑到收银系统的操作便捷,能够给收银员的工作提升效率的同时,避免出现错误,...
超市收银系统百科 超市收银系统是零售业中用于处理销售交易的关键技术,它不仅提高了结账效率,还增强了顾客的购物体...
酒吧收银系统百科 1. 酒吧收银系统概述 酒吧收银系统是专为酒吧、夜店等娱乐场所设计的一套集成化管理软件,它能够实现...
生鲜超市收银系统十大品牌有哪些呢?下面小编就为大家来讲解一下各收银系统的特...