1 瀑布流是什么？
瀑布流布局是比较流行的一种网站页面布局，有一个专业的英文名称 Masonry Layouts。
瀑布流布局已经有好多年的历史了，其中最典型的例子是：Pinterest网站。
瀑布流布局其核心是基于一个网格的布局，由宽度相等高度不定的元素组成的参差不齐的多栏布局，随着页面的向下滚动，新的元素自动附加到最短的一列，以此不断的加载。
2 瀑布流实现原理：
当有新的元素需要展示时，每次都是寻找各列之中高度最小的一列，并将新的元素添加到该列后面。
3 代码实现：
最终时间的效果为：
3.1 确定每一列的宽度
在小程序中，引入了尺寸单位：rpx（responsive pixel），可以根据屏幕宽度进行自适应。转换规则如下：
而后端返回的图片的宽度和高度的单位一般都是px，如何正确的转化，才能计算出正确的缩放比例以及缩放后的图片尺寸？
（1）统一计算单位。
（2）计算每一列的宽度waterfallWidth。
假设设置每一列的宽度为 328rpx，原始图片的宽为picWidth，高为picHeight。
首页把宽度转为px可得每一列的宽度：
waterfallWidth= 328 * (Math.floor((wx.getSystemInfoSync().windowWidth / 750) * 100) / 100) px
3.2 计算最终图片展示时的高度
根据图片最终展示的宽度为 waterfallWidth，动态计算每张图片对应的高度：
（1）首先计算缩放比例：
scale = waterfallWidth / picWidth;（2）缩放后的图片高度：
afterPicHeight = picHeight * scale;3.3 计算会影响列高度的其他元素高度
要正确的寻找最短的那一列，除了图片，图片上下区域如果非固定的，可变动的，会影响列高度的元素都需要列入考虑。
此处，需要额外考虑的是图片描述区域的高度。
（1）计算图片描述区域行数：
/**
* 参数说明：
* text：计算的文本
* num：一行的字节数
* return：一行一行组成的数组
*/
textByteLength(text, num) {
let strLength = 0;
let rows = 1;
let str = 0;
const textArr = [];
for (let i = 0; i < text.length; i++) {
if (text.charCodeAt(i) > 255) {
strLength += 2;
if (strLength > rows * num) {
strLength++;
textArr.push(text.slice(str, i));
str = i;
rows++;
}
} else {
strLength++;
if (strLength > rows * num) {
textArr.push(text.slice(str, i));
str = i;
rows++;
}
}
}
textArr.push(text.slice(str, text.length));
return textArr;
}（2）已知一行的高度为 15rpx，则可获得描述区域的高度为
15*textArr.length。3.4 记录维护每一列的最终高度
3.5 下滑不断加载填充
为了提高性能，减少每一次 setData 的数据量，选择二位数组的存储结构。
this.setData({
['phototListLeft[' + page + ']']: phototListLeft,
['phototListRight[' + page + ']']: phototListRight
});本实例亮点：
- 使用二维数组存储，减少每次 setData 的数据量，有效提高了性能；
- 图片的描述内容也是随机的，高度不固定，通过动态计算，获取图片描述区域的高度；
- 因为图片宽度单位为px，故为了在各个手机能完美适配，通过单位转化，完美适配；
- 对每张图片显示前，设置随机的填充背景。
