瀑布流布局 流式布局 不规则图文排列布局 微信小程序按顺序排列的瀑布流布局

微信小程序按顺序排列的瀑布流布局

首先我说一下，我的项目需求：

1. 瀑布流布局排列
2. 按照一定的顺序排列
3. 图文结合

不好意思，跟大家分享下我的过程，不想看的直接跳过看最后，

起初的实现思路是：

1、由于图片是从后台获取的，大家都知道image 有一个bindload事件，就是图片加载完成，就是在图片加载完成后获取到该图片的高度，然后通过既定的宽度，算出图片的实际显示高度。
2、知道了图片的实际显示高度，就该计算图片到底是放在左边还是右边，为了方便计算，我们将所有图片列表一分为二，然后如果左边小于等于右边，就将刚加载完成的这张图片放在左边，很容易这样就形成了瀑布流。当然这些可能都是大家所熟知的。
3、瀑布流实现了，可是每个图片加载完成的顺序跟后台给的顺序不同，导致每次打开瀑布流看到的顺序都不同，不符合我们的需求。

第一次调整：

为了达到按照后台给的顺序排列，我们做了下列调整：
多添加了一个事件，利用index 控制每次按照顺序 加载下一张，然后根据高度再决定放左边还是右边，哇塞，功夫不负有心人，果然实现了，
可是问题又来了，呵呵哒，要求的顺序也做到了，加载速度慢的想砸手机（哈哈哈……只是某些手机特别慢啦），毕竟我们的小程序是供老年人用的，所以……你懂的，

第二次调整：

如何让加载速度变快一些呢？当然要排除额外付费的情况，哈哈哈……
经过分析，为什么加载速度慢？首先每次图片加载的时候都要重新计算高度，所以我们想到了，在后台的数据中添加了图片的宽度和高度的值，这样就避免了每次都要在bindload时计算图片的实际显示高度，可以从后台获取列表对数据处理的同时，直接拿到高度，然后根据宽高比，计算出高度，然后根据左右两边高度比较，确定放置在哪一边，然后将高度加在左边或右边。这样实现的好处
第一：无需等图片加载完毕，就可以确定图片放置的位置，
第二，可以无需考虑之前的排序问题。
第三：代码缩减了N行
第四：加载速度超级快呀（这才是我想要的啦）

抱歉给你们看了这么多废话，下面是重点：

效果是这样滴
有需要的朋友可以直接去下载demo ，如果觉得还可以借用您发财的小手为我点亮star,地址为：https://github.com/taurus888/waterFlowDemo

原谅我是个娃娃控

主要代码

getImageList(){/*第一步计算出每个图片的高度第二步判断放置在哪边*/let _this = this;let imageList = this.data.imageList; //假装我们从后台拿到了列表for(let i=0;i<imageList.length;i++){  let imgWidth = _this.data.imgWidth;  let oImgW = imageList[i].imageWidth;let col1 = _this.data.col1;let col2 = _this.data.col2;var hotListLeftHeightTemp = _this.data.hotListLeftHeight;var hotListRightHeightTemp = _this.data.hotListRightHeight;//比例计算let scale = imgWidth / oImgW;imageList[i].imageHeight = imageList[i].imageHeight * scale;      //自适应高度imageList[i].imageHeight += 60;if (hotListLeftHeightTemp <= hotListRightHeightTemp) {hotListLeftHeightTemp += imageList[i].imageHeight;col1.push(imageList[i])} else {hotListRightHeightTemp += imageList[i].imageHeight;col2.push(imageList[i])}_this.setData({hotListLeftHeight: hotListLeftHeightTemp,hotListRightHeight: hotListRightHeightTemp,col1: col1,col2: 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.getImageList() },