在现代互联网时代，瀑布流展示方式越来越受到人们的青睐，其可以将海量的图片、商品等展示在界面上，不同大小的内容通过某种规律美观、有序地布局在网页或应用程序上，极大地提升了内容的呈现方式和用户体验。微信小程序在展示图片和商品等方面也可以采用瀑布流布局，让小程序的内容看起来更加美观、实用。然而，小程序内置的组件并不支持瀑布流展示，需要我们自己动手来实现。本文将带您一步步实现微信小程序瀑布流展示效果，让您的小程序更加出色。本文主要分为三个部分，分别介绍实现瀑布流布局的思路、详细的代码实现和样式的优化，希望能够为读者提供实用的经验和技巧。

目前微信小程序官方提供了Skyline渲染引擎实现瀑布流效果

实现瀑布流布局的思路

  1. 确定每个元素的宽度和高度。这是瀑布流布局的重要前提。

  2. 定义一个包含所有元素的容器，并设置其宽度。

  3. 创建一个数组columnHeight，用于保存每一列的高度。

  4. 对于容器中的每一个元素，需要找到它可以放置的位置。遍历columnHeight数组中的每一个元素，找到最小高度的列，将元素添加到该列。

  5. 更新该列的高度，将当前元素高度加入columnHeight数组中对应的元素中。

  6. 继续处理下一个元素，直至所有元素全部处理完毕。

  7. 容器的高度最终应该是columnHeight数组中的最大值，将该值设置为容器的高度即可。

具体实现时，我们需要在 wxml 文件中定义一个 scroll-view 组件和一个用来显示内容的 view 组件。在 JavaScript 文件中，我们将定义一个 contentArray 数组来存储所有要展示的内容，并通过 onLoad 和 onReachBottom 方法来实现内容的动态加载。代码的具体实现需要了解微信小程序的渲染机制、布局方法以及事件传递等知识。

详细的代码实现

  1. 定义一个数组来保存内容，并初始化一个列高度的数组。
1
2
3
4
5
6
Page({
  data: {
    contentArray: [], // 定义一个数组
    columnHeight: [0, 0] // 初始化列高度的数组
  }
})

     2.在 onLoad 方法中，初始化 contentArray 数组。

1
2
3
4
5
6
7
8
9
10
11
onLoad: function () {
  var that = this;
  wx.request({
    url: 'https://xxx.com/getData.php',
    success: function(res) {
      that.setData({
        contentArray: res.data
      });
    }
  })
}

3.在 onReachBottom 方法中，动态加载数据并更新 contentArray 数组。

1
2
3
4
5
6
7
8
9
10
11
12
onReachBottom: function () {
  var that = this;
  wx.request({
    url: 'https://****',
    success: function(res) {
      var contentArray = that.data.contentArray.concat(res.data);
      that.setData({
        contentArray: contentArray
      });
    }
  })
}
  1. 在 wxml 中，实现 scroll-view 和 view 标签的布局。
1
2
3
4
5
<scroll-view scroll-y="true" bindscrolltolower="onReachBottom">
  <view class="content" wx:for="{{contentArray}}" wx:key="{{index}}" style="height:{{item.height * rate}}px;position:absolute;left:{{item.left}}px;top:{{item.top * rate}}px;">
    <image src="{{item.src}}" style="width:{{item.width}}px;height:{{item.height}}px;"></image>
  </view>
</scroll-view>
  1. 在 JavaScript 文件中，实现 contentArray 数组的更新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 按照瀑布流布局为图片分配位置，并更新列高度
let heightArr = that.data.columnHeight;
let leftWidth = res.windowWidth / 2 - imgWidth / 2;
let rightWidth = res.windowWidth / 2 + imgWidth / 2;
let minHeight = Math.min.apply(null, heightArr);
let index = heightArr.indexOf(minHeight);
let top = heightArr[index];
let left = index === 0 ? leftWidth : rightWidth;
let obj = {
  width: imgWidth,
  height: imgHeight,
  src: item.src,
  top: top,
  left: left
};
that.data.contentArray.push(obj);
that.data.columnHeight[index] += imgHeight + space;

样式的优化

通过合理的样式设置和调整，可以使小程序的界面更加美观、流畅。比如我们可以根据不同屏幕大小和分辨率来调整图片大小和间距，或者使用动态的加载效果来提升用户体验。代码样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.content {
  width: 45%;
  margin: 5%;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.content image {
  display: block;
  margin: 0 auto;
}

通过本文的实践演示和技巧分享，相信读者已经对微信小程序实现瀑布流展示有了更加深入的了解。希望读者在实际开发中能够灵活运用这些知识，打造出更加出色的小程序作品。