最近在写的一个小程序 (****)要用到瀑布流，效果如下：

事先对市面上几款app还有小程序进行了一些调研

• 小红书
• 熊猫TVapp
• 淘宝app
• ...

移动端的瀑布流页面主要是两类：

1. 无序的，瀑布流的内容相对随机，看不出明显的先后关系(指的是逻辑上的)，比如小红书的瀑布流
2. 有序的，分数高的在前面，分数低的在后面。

瀑布流布局的两个明显的特征（名词）

1. 瀑布流由列构成（column）
2. 列内的每一项高度不固定；

由此 小程序端可以这么写

wxml

      
     
     
        
             
                  
         
               
             
                
         
              
          
        
      复制代码
     
    

js

let col1H = 0;let col2H = 0;Page({  data: {    scrollH: 0,    images: [],    col1: [],    col2: [],  },  onLoad: function () {    wx.getSystemInfo({      success: (res) => {        let ww = res.windowWidth;        let wh = res.windowHeight;        let scrollH = wh;        this.setData({          scrollH: scrollH        });        this.loadImages();      }    })  },  onImageLoad: function (e) {    let oImgW = e.detail.width;         //图片原始宽度    let oImgH = e.detail.height;        //图片原始高度    let images = this.data.images;    let item = e.currentTarget.dataset.item;    let col1 = this.data.col1;    let col2 = this.data.col2;    if (col1H <= col2H) {      col1H += oImgH ;      col1.push(item);    } else {      col2H += oImgH;      col2.push(item);    }    let data = {      col1: col1,      col2: col2    };    this.setData(data);  },  loadImages: function () {     //这里加载图片  },})复制代码

wxss

.container {  display:flex;}.container .column {  width:48%;  margin:1%;}复制代码

想法

瀑布流的实现有很多方式，还有一种很常用的方式就是定位布局，动态计算需要可展示的列以及内容的位置，大家可以去看看花瓣网的布局，这里就不展开了。小程序的话，采用以上方法应该是相对比较简便的。拓展起来也很方便

参考文章