小程序实现瀑布流布局

小程序实现瀑布流

**
实现效果如图：一：需求分析

页面主要分成两列，每个条目的高度不固定，条目主要由封面图+标题+头像+发布者昵称组成多列排列要求，第一条在左侧，第二条在右侧，后续的根据左右两栏的高度，依次放置在高度较低的一侧。

二：技术实现思路

1、将整个页面分成左右两栏，两侧各对应一个数据集。2、定义变量，记录左右两侧的累计高度，然后依次将条目放置在高度较低的一侧。从而我们可以得到左右两侧的数据集，后续只需要进行页面的渲染就行了；3、图片高度的确定，单个条目中图片宽度=(单列条目宽度/图片的原始宽度)*图片原始高度；

三：思路有了，接下来就是开始编写代码了

1、编写布局，将整个页面分成两栏xml代码如下

<view class='content'>
<view class='left'><block wx:for="{{leftList}}" wx:key="index"><image class='pic' style='height:{{item.CoverHeight}}' src='{{item.Cover}}'></image></block>
</view>
<view class='right'><block wx:for="{{rightList}}" wx:key="index"><image class='pic' style='height:{{item.CoverHeight}}' src='{{item.Cover}}'></image></block>
</view>
</view>

2、编写样式代码如下

page{width: 100%;margin: 0;background: #F2F2F2;
}
.content{display: flex;flex-direction: row;margin: 20rpx;overflow: hidden;
}.left{width: 345rpx;
}.right{width: 345rpx;margin-left: 20rpx;
}.pic{border-radius: 10rpx;width: 345rpx;
}

js代码如下：

Page({/*** 页面的初始数据*/
data: {noramalData: [{"Cover": "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png","CoverHeight": 467,"CoverWidth": 350},{"Cover": "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190313090409/完美9.png","CoverHeight": 871,"CoverWidth": 672}],leftList: [],rightList: [],leftHight: 0,rightHight: 0
},//以本地数据为例，实际开发中数据整理以及加载更多等实现逻辑可根据实际需求进行实现
onLoad: function(options) {var that = this;var allData = that.data.noramalData;//定义两个临时的变量来记录左右两栏的高度，避免频繁调用setData方法var leftH = that.data.leftHight;var rightH = that.data.rightHight;var leftData = [];var rightData = [];for (let i = 0; i < allData.length; i++) {var currentItemHeight = parseInt(Math.round(allData[i].CoverHeight * 345 / allData[i].CoverWidth));allData[i].CoverHeight = currentItemHeight + "rpx";//因为xml文件中直接引用的该值作为高度，所以添加对应单位if (leftH == rightH || leftH < rightH) {//判断左右两侧当前的累计高度，来确定item应该放置在左边还是右边leftData.push(allData[i]);leftH += currentItemHeight;} else {rightData.push(allData[i]);rightH += currentItemHeight;}}//更新左右两栏的数据以及累计高度that.setData({leftHight: leftH,rightHight: rightH,leftList: leftData,rightList: rightData})
},})

四：实现该效果需要注意的点。

1.左右两栏布局的确定
2.每张图片高度的计算
3.根据左右两栏的高度，确定每个item的摆放位置。

参考链接：https://www.jianshu.com/p/c7c2b5c425bc

小程序实现瀑布流布局相关推荐

微信小程序实现瀑布流布局
微信小程序实现瀑布流布局实现的效果图如下显示: 一,需求分析布局分为两列,两列的高度随着图片的插入而改变默认给左右两列插入一张图片,插入图片后,根据两列的的高度做为判断依据,依次给高度更低的一列 ...
微信小程序双瀑布流布局+动态懒加载
效果图实现代码: 思路: 将双瀑布流分为left.right两个数据流,通过动态获取两边数据的动态高度来进行判断,下一条数据插入低的一方. 因为用户所上传图片高度不一致,所以image的mode属性 ...
微信小程序实现瀑布流（FlowLayout）效果
前言:小程序不同于安卓直接提供布局的配置,而必须要像写前端页面一样来写.并且小程序没有像web网页的DOM和BOM操作,准确的来说是存在这么个API的,但是我测试使用的时候,得到的数据总是不尽人意,地 ...
关于微信小程序简单瀑布流的制作
应业务需要,制作了简单的瀑布流,应用于购物平台. 首先是单个内容组件.考虑到后台计算的消耗,因而将内容里的图片高度采用直接输入.到时传入数据时需注意. <!--components/showit ...
小程序实现瀑布流，获取图片高度分成两组数据的函数封装代码
把一个数组根据数组内部的图片的高度,拆分成两个数组,组成瀑布流数据的方法. 使用方式: async created() {var arr = this.$mock.sssdata.data.lists ...
微信小程序实现瀑布流实例
瀑布流的效果图如下: 1.wxml中的代码如下  <view class="containers&qu ...
微信小程序实现瀑布流仿小红书
要做的小红书瀑布流效果 homepage.wxml代码 <!-- 瀑布流大概的思路就是,直接定义两列等宽的view,然后两列都加载相同的数据wx:if="{{index%2==1}}& ...
微信小程序实现瀑布流，如何实现！
废话不多,不爱表达,直接上代码! 首先,瀑布流样式都知道左右高度是不一样的,所以需要我们写两套样式,左边和右边. <view class='left'><block wx:for=& ...
uview 瀑布流_最简单的微信小程序瀑布流布局方法
最近写一个小程序的瀑布流布局,发现网上别人写的都是css加js的方法,页面分两列,加载数据通过JS分别载入到两列中.比较复杂,研究了一下,弄了一个比较简单的方法,分享给大家. 效果如下图: 小程序瀑布 ...

小程序实现瀑布流布局

小程序实现瀑布流

小程序实现瀑布流布局相关推荐

最新文章

热门文章