自己做视频会员网站,西安网站建设哪些公司好,网络高清播放器如何安装,庐江县建设局网站瀑布流布局是一种比较流行的页面布局方式#xff0c;最典型的就是Pinterest.com#xff0c;每个卡片的高度不都一样#xff0c;形成一种参差不齐的美感。
在HTML5中#xff0c;我们可以找到很多基于jQuery之类实现的瀑布流布局插件#xff0c;轻松做出这样的布局形式。在…瀑布流布局是一种比较流行的页面布局方式最典型的就是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 styledisplay:noneimage wx:for{{images}} wx:keyid id{{item.id}} src{{item.pic}} bindloadonImageLoad/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-ytrue styleheight:{{scrollH}}px bindscrolltolowerloadImagesview stylewidth:100%view classimg_itemview wx:for{{col1}} wx:keyidimage src{{item.pic}} stylewidth:100%;height:{{item.height}}px/image/view/viewview classimg_itemview wx:for{{col2}} wx:keyidimage src{{item.pic}} stylewidth:100%;height:{{item.height}}px/image/view/view/view
/scroll-view好了挺简单的一个例子如果你有更好的方法不吝分享一下哦。
完整代码Github下载https://github.com/zarknight/wx-falls-layout
