小程序瀑布流的实现三种方式

实现思路：把图片分成两排，创建两个数组，计算总数组中图片的宽高，对比上一个图片和当前的图片高度，低的就给另一个数组添加。

效果图：

第一种：如果后端返回了图片高度

处理过程如下：

js:

Page({data:{list:[],vList:[],v2List:[]},onLoad: function (options) {this.photoDetails();},photoDetails() {var data = {}post(接口名称, 'POST', data).then(res => {this.setData({list: res.data.photoDetails,//照片})var that = this;var list = res.data.photoDetails;list.forEach((item,idx) => {item.img_index = idx;  //添加索引字段，获取在原数组的位置item.checked = false;  //添加是否选中状态，默认都不选中})var vList = [];   //第一列var v2List = [];  //第二列var colOneHeight=0;var colTwoHeight=0;for (var i = 0; i < list.length; i++) {if(parseFloat(colOneHeight)<=parseFloat(colTwoHeight)){colOneHeight = parseFloat(list[i].img_height) + parseFloat(colOneHeight);vList.push(list[i])}else{colTwoHeight = parseFloat(list[i].img_height) + parseFloat(colTwoHeight);v2List.push(list[i])}}that.setData({list: list,vList: vList,v2List: v2List})})},
})

wxml:

 <view class="flow"><view class="left"><view class="leftItem" wx:for="{{vList}}" wx:for-item="item1" wx:for-index="index1"   data-id="{{item1.id}}" data-index="{{item1.img_index}}"><image src="{{item1.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image></view></view><view class="right"><view class="rightItem" wx:for="{{v2List}}" wx:for-item="item2" wx:for-index="index2"   data-id="{{item2.id}}"  data-index="{{item2.img_index}}"><image src="{{item2.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image></view></view></view>

wxss:

/* 瀑布流 */
.flow{display: flex;flex-direction: row;margin: 30rpx 30rpx 0 30rpx;box-sizing: border-box;
}
.flow .left{display: flex;flex-direction: column;width: 50%;margin-right: 8rpx;
}.flow .left .flowimg, .flow .right .flowimg{/* width: 341rpx;height: auto; */width: 100%;height: 100%;margin-bottom: 8rpx;
}
.flow .right{display: flex;flex-direction: column;width: 50%;
}
.flow .leftItem, .flow .rightItem{position: relative;width: 100%;box-sizing: border-box;
}

第二种：后端返回的数据没有图片高度，需要自己接收数据以后，计算图片的高度

js:

Page({data:{list:[],vList:[],v2List:[]},onLoad: function (options) {this.photoDetails();},photoDetails() {var data = {}post(接口名称, 'POST', data).then(res => {this.setData({list: res.data.photoDetails,//照片})var that = this;var list = res.data.photoDetails;list.forEach((item,idx) => {that.get_img_height(item.image_url).then(rr=>{item.img_height = rr ;  //赋值高度})item.img_index = idx;  //添加索引字段，获取在原数组的位置item.checked = false;  //添加是否选中状态，默认都不选中})var vList = [];   //第一列var v2List = [];  //第二列var colOneHeight=0;var colTwoHeight=0;setTimeout(() => {   //使用延迟加载数据，这样有时候会计算输出NaNfor (var i = 0; i < list.length; i++) {console.log('colOneHeight',colOneHeight);console.log('colTwoHeight',colTwoHeight)if(parseFloat(colOneHeight)<=parseFloat(colTwoHeight)){colOneHeight = parseFloat(list[i].img_height) + parseFloat(colOneHeight);vList.push(list[i])}else{colTwoHeight = parseFloat(list[i].img_height) + parseFloat(colTwoHeight);v2List.push(list[i])}}that.setData({list: list,vList: vList,v2List: v2List})console.log('vList',that.data.vList);console.log('v2List',that.data.v2List)}, 0);})},get_img_height(url){return new Promise(ress=>{wx.getImageInfo({src: url,success (res) {ress(res.height)return res.height}})})},
})

其他的同上

第三种：按照奇数偶数来显示

使用这种，如果图片长度差距太大，会造成左右不一

js:

Page({data:{list:[],vList:[],v2List:[]},onLoad: function (options) {this.photoDetails();},photoDetails() {var data = {}post(接口名称, 'POST', data).then(res => {this.setData({list: res.data.photoDetails,//照片})})},
})

wxml:

 <view class="flow"><view class="left"><view class="leftItem" wx:for="{{list}}" wx:for-item="item1" wx:for-index="index1"   data-id="{{item1.id}}" data-index="{{item1.img_index}}" wx:if="{{index1%2==0}}"><image src="{{item1.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image></view></view><view class="right"><view class="rightItem" wx:for="{{list}}" wx:for-item="item2" wx:for-index="index2"   data-id="{{item2.id}}"  data-index="{{item2.img_index}}" wx:if="{{index2%2==1}}"><image src="{{item2.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image></view></view></view>

小程序瀑布流的实现三种方式相关推荐

详解微信小程序页面间传递信息的三种方式
详解微信小程序页面间传递信息的三种方式在开发微信小程序的时候,经常会遇到在页面间传递信息的情况,有三种方法可以实现. 1. 使用数据缓存将要存储的数据使用以下方法放入缓存 wx.setStorag ...
uview 瀑布流_微信小程序瀑布流最好最简单的解决方案
网上能搜到的小程序瀑布流解决方案,要么代码复杂.逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下. 最简单的实现方案,不适用有分页的场景. 这个方案简单的原因是因为仅仅使用了cs ...
微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
C#利用WCF改进文件流传输的三种方式
摘要:本文介绍C#利用WCF改进文件流传输的三种方式:MTOM模型.基于同步传输的异步回调模型.基于异步传输的异步模型,并提供相应的实现代码供参考. - WCF在跨域传输使用了两种模型的方法调用:一种 ...
微信小程序实现跳转的几种方式总结（推荐）
今天把实现微信页面的跳转的几种方法总结分享下 1.使用导航组件,标签,页面链接来实现(可以发现点击时有背景) <view class=&quo ...
微信小程序设置背景图的几种方式
微信小程序设置背景图的几种方式原本在html中可以通过background-image来设置背景图片 .page {width: 100%;height: 100%;background-size: ...
微信小程序瀑布流的实现
今天介绍下瀑布流的实现,在客服端想实现这种布局都提供了方法,在微信小程序中只能通过css提供的方式自己布局. 想实现这种效果其实可以使用css的方法直接放成两列就可以了column-count:2; ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
swiper 定义放多少张图片_小程序瀑布流组件:支持翻页与图片懒加载
(给前端大全加星标,提升前端技能) 作者:老人羽海 https://segmentfault.com/a/1190000022680541 电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重 ...

小程序瀑布流的实现三种方式

第一种：如果后端返回了图片高度

第二种：后端返回的数据没有图片高度，需要自己接收数据以后，计算图片的高度

第三种：按照奇数偶数来显示

小程序瀑布流的实现三种方式相关推荐

最新文章

热门文章