先贴上原作者链接，很漂亮-.- 传送门:https://blog.csdn.net/Wu_shuxuan/article/details/78490063

• 为何说超轻松？

  • 无需知道图片宽高（当然要实现懒加载是必须的）
  • 一个判断
  • 一句css
  • 网上其他的方法对懒懒的博主来说太麻烦了，好了，不瞎BB了，上干货
    

• 其实一句就够了，column-count:2;

.free-WaterfallFlow{  width:94%;  column-count:2;/*column-count 属性规定元素应该被分隔的列数：*/  margin:0 auto;}.free-WaterfallFlow .flex-wrap{  display: inline-block;  width:100%;  margin-bottom:4%;  border:1px solid #ccc;  padding:1%;  padding-top:5%;  margin-right:2%;  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);  text-align: center;}.flex-wrap image{  width:95%;  margin:0 auto;}

• 自己怎么喜欢怎么写，这里是小程序的写法，web上的更容易吧

template lang="pug"  view.free-panel-title    view.free-WaterfallFlow      repeat(for="{{img}}")        view.flex-wrap.a(wx:if="{{index % 2 == 0}}")          image(mode="widthFix" src="{{item}}")          view title      repeat(for="{{ img }}")        view.flex-wrap.b(wx:if="{{index % 2 !== 0}}")          image(mode="widthFix" src="{{item}}")          view title/template

• 说的干货，数据也上吧，度娘上找的，自己掂量。

img : [      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531825645104&di=0cfede1dd354581e22385b1862375a6a&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F13%2F71%2F35%2F24k58PICSiB_1024.jpg',      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531825645032&di=826b8cfa4f7c5a8765d5c2156913dcbb&imgtype=0&src=http%3A%2F%2Fimg382.ph.126.net%2Fp4dMCiiHoUGxf2N0VLspkg%3D%3D%2F37436171903673954.jpg',      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531825645104&di=2c9e1223e705806967640495e4bac26b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0147a458783b1ba801219c77f9ec2e.jpg%402o.jpg',      'http://t1.hxzdhn.com/uploads/tu/bj/slt/yezpvg0x23b.jpg',      'http://t1.hxzdhn.com/uploads/tu/201807/9999/95ed87388b.jpg',      'http://t1.hxzdhn.com/uploads/tu/201807/9999/99495c4cf4.jpg',      'http://t1.hxzdhn.com/uploads/tu/201807/9999/f867c97e25.jpg',      'http://t1.hxzdhn.com/uploads/tu/201807/9999/2cc7ab0bc5.jpg',      'http://t1.hxzdhn.com/uploads/tu/201807/9999/2f4435caaf.jpg',      'http://t1.hxzdhn.com/uploads/tu/201807/9999/ce76898540.jpg',      'http://t1.hxzdhn.com/uploads/tu/201807/9999/a2ccc41e47.jpg',      'http://t2.hddhhn.com/uploads/tu/201707/521/83.jpg',      'http://t2.hddhhn.com/uploads/tu/20150700/2hndrjt0jxe.jpg',      'http://t2.hddhhn.com/uploads/tu/20150700/2hndrjt0jxe.jpg',    ]

• 总结
  
  • 利用column-count:2;分成两行。
  • 再用wx:if条件渲染，vue等同理，当然直接用jquery也行。怎么喜欢怎么用。