简单快捷的瀑布流布局demo，通过计算图片的的宽高进行不规则布局。数据已经换成静态，可以直接运行，详情页暂时没有处理，重点是瀑布流布局。主要在index页面中，复制到自己的项目，修改一下即可使用...

给客户开发项目中，客户要的，就封装了一下，有需要的可以看看，demo比较简单。主要是通过计算图片的高度进行重新写入数据，实现不规则布局效果。一般瀑布流布局都是计算元素的高度来实现的。服务端如果传过来的图片有宽高，实现瀑布流布局会更简单，省去了前端进行计算高度的步骤...

演示效果：

js代码：

var app = getApp()
Page({
data: {
/**
     * 页面配置
     */
winWidth: 0,
winHeight: 0,
    // 精选数据
datalist: [],
    // 日报数据
dataThemes: [],
dataListDateCount: 0,
imagesHeightList: []
},
onLoad: function () {
var that = this
/**
     * 获取系统信息
     */
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}

});
that.loadData();
},
loadData: function () {
/**
     * 发送请求数据
     */
var that = this
let arr = {
"date": "20161104",
"stories": [{
"image_hue": "0x1e2e1a",
"title": "小事 · 虽然只是陌生人",
"url": "https://daily.zhihu.com/story/8628738",
"hint": "VOL.156",
"ga_prefix": "110422",
"images": [
"http://pic4.zhimg.com/f0fa89a72c5aed7d5e4b87f805367a3f.jpg"
],
"type": 0,
"id": 8628738
},
{
"image_hue": "0x999194",
"title": "所谓朋友，就是你们可以大吵一架，但不会真的怀有怨气",
"url": "https://daily.zhihu.com/story/8948257",
"hint": "幻仔牛奶 · 4 分钟阅读",
"ga_prefix": "110421",
"images": [
"http://pic4.zhimg.com/b305bba06d4f906288e1aeb188515877.jpg"
],
"type": 0,
"id": 8948257
},
{
"image_hue": "0x8a4e2d",
"title": "所有判决过案件都要存起来的判例法系，该怎么检索？",
"url": "https://daily.zhihu.com/story/8949446",
"hint": "知乎用户 · 6 分钟阅读",
"ga_prefix": "110420",
"images": [
"http://pic3.zhimg.com/c41d2f7c9a0744e37fb824fee908a4e6.jpg"
],
"type": 0,
"id": 8949446
},
{
"image_hue": "0x7d9ab3",
"title": "大国重器，长征五号的成功意味着太多……",
"url": "https://daily.zhihu.com/story/8949500",
"hint": "太空精酿 · 5 分钟阅读",
"ga_prefix": "110419",
"images": [
"http://pic4.zhimg.com/744f4b1b30c7a23da1188cbc8464de73.jpg"
],
"type": 0,
"id": 8949500
},
{
"image_hue": "0xb38a7d",
"title": "今年中国人花了 110 亿美元，买了好多德国公司",
"url": "https://daily.zhihu.com/story/8948981",
"hint": "李遥 · 1 分钟阅读",
"ga_prefix": "110418",
"images": [
"http://pic1.zhimg.com/9271027346002fc82eea4e93b06dc3b4.jpg"
],
"type": 0,
"id": 8948981
},
{
"image_hue": "0x29231d",
"title": "知乎好问题 · 买碗碟盘子，方形和圆形哪种好？",
"url": "https://daily.zhihu.com/story/8949308",
"hint": " · 1 分钟阅读",
"ga_prefix": "110417",
"images": [
"http://pic4.zhimg.com/6017bc9013d226deb9b0703584fbc3df.jpg"
],
"type": 0,
"id": 8949308
},
{
"image_hue": "0x847f5c",
"title": "和女权一样，残障人士也领导了一场人权运动",
"url": "https://daily.zhihu.com/story/8943540",
"hint": "YoviaXU · 7 分钟阅读",
"ga_prefix": "110416",
"images": [
"http://pic1.zhimg.com/7dfc69a8eb8fdfd81dd397d520205e5c.jpg"
],
"type": 0,
"id": 8943540
},
{
"image_hue": "0x3b4732",
"title": "美丽之外，夏梦的智慧更让人赞叹",
"url": "https://daily.zhihu.com/story/8948413",
"hint": "木易 · 8 分钟阅读",
"ga_prefix": "110415",
"images": [
"http://pic2.zhimg.com/e110ac52d96c0abb10e4dc7c12d672a5.jpg"
],
"multipic": true,
"type": 0,
"id": 8948413
},
{
"image_hue": "0x89745f",
"title": "名字听起来都很霸气，但鹰、隼、雕、枭有什么区别？",
"url": "https://daily.zhihu.com/story/8943387",
"hint": "小星有狗 · 5 分钟阅读",
"ga_prefix": "110414",
"images": [
"http://pic1.zhimg.com/0ad8abab59338de013ffc7563f5280ec.jpg"
],
"multipic": true,
"type": 0,
"id": 8943387
},
{
"image_hue": "0x917466",
"title": "学会做川式火锅底料，随便放东西涮一涮，都好吃得没天理",
"url": "https://daily.zhihu.com/story/8943521",
"hint": "灰子 · 2 分钟阅读",
"ga_prefix": "110413",
"images": [
"http://pic2.zhimg.com/a28eaa33bc3af979b8dd965a8faf0af1.jpg"
],
"multipic": true,
"type": 0,
"id": 8943521
},
{
"image_hue": "0xb37d98",
"title": "大误 · 我选择主动失忆",
"url": "https://daily.zhihu.com/story/8946522",
"hint": "邱雷苹 · 14 分钟阅读",
"ga_prefix": "110412",
"images": [
"http://pic3.zhimg.com/2f26505423168e94ea66a64cb4ee7532.jpg"
],
"type": 0,
"id": 8946522
},
{
"image_hue": "0xb3a37d",
"title": "如果达 · 芬奇会看到毕加索的画，会说什么呢？",
"url": "https://daily.zhihu.com/story/8947948",
"hint": "翁昕 · 7 分钟阅读",
"ga_prefix": "110411",
"images": [
"http://pic4.zhimg.com/dcf1c6af1e306752a5b14600f6ba22a3.jpg"
],
"type": 0,
"id": 8947948
},
{
"image_hue": "0x342427",
"title": "微信整顿公众号刷赞，也戳不破网红经济的泡沫",
"url": "https://daily.zhihu.com/story/8939310",
"hint": "知乎用户 · 4 分钟阅读",
"ga_prefix": "110410",
"images": [
"http://pic3.zhimg.com/669b8349c8d06119e31e46b78355b656.jpg"
],
"type": 0,
"id": 8939310
},
{
"image_hue": "0xb39e7d",
"title": "美国总统能炒掉司法部长、提名法官，如何保证司法独立？",
"url": "https://daily.zhihu.com/story/8945100",
"hint": "姜源 · 1 分钟阅读",
"ga_prefix": "110409",
"images": [
"http://pic1.zhimg.com/8d5e1470a1c5147333c520c997f82bc4.jpg"
],
"type": 0,
"id": 8945100
},
{
"image_hue": "0x4386b3",
"title": "雾霾天里算算这笔账，想要清洁的空气得花多少钱",
"url": "https://daily.zhihu.com/story/8946966",
"hint": "陆琼 · 4 分钟阅读",
"ga_prefix": "110408",
"images": [
"http://pic4.zhimg.com/96c42665a09102c2de0853cebd3a2b5b.jpg"
],
"type": 0,
"id": 8946966
},
{
"image_hue": "0x526275",
"title": "心理学家觉得，一个人独居也是件不错的事儿",
"url": "https://daily.zhihu.com/story/8947185",
"hint": "Summer S · 2 分钟阅读",
"ga_prefix": "110407",
"images": [
"http://pic2.zhimg.com/338227af1c031ec532e6acc2ff8c7975.jpg"
],
"type": 0,
"id": 8947185
},
{
"image_hue": "0x7b543a",
"title": "念 MBA 到底有没有用？",
"url": "https://daily.zhihu.com/story/8945314",
"hint": "韩锐 · 3 分钟阅读",
"ga_prefix": "110407",
"images": [
"http://pic4.zhimg.com/f98f9be4eb2904ee6179a7282f0aee9f.jpg"
],
"type": 0,
"id": 8945314
},
{
"image_hue": "0x443e28",
"title": "和父亲一起抗癌三年，这些经验，希望你永远也用不到",
"url": "https://daily.zhihu.com/story/8946692",
"hint": "项栋梁 · 8 分钟阅读",
"ga_prefix": "110407",
"images": [
"http://pic3.zhimg.com/c7fcea0d72cf3292e8b5231429c67eb2.jpg"
],
"type": 0,
"id": 8946692
},
{
"image_hue": "0xb3b3b3",
"title": "读读日报 24 小时热门 TOP 5 · 人们只知她绯闻，她却有完美人生",
"url": "https://daily.zhihu.com/story/8947119",
"hint": "编辑部小李 · 1 分钟阅读",
"ga_prefix": "110407",
"images": [
"http://pic1.zhimg.com/07fbef7ddb2494216477ae527bec1760.jpg"
],
"type": 0,
"id": 8947119
},
{
"image_hue": "0x29211d",
"title": "瞎扯 · 如何正确地吐槽",
"url": "https://daily.zhihu.com/story/8945554",
"hint": "VOL.1208",
"ga_prefix": "110406",
"images": [
"http://pic4.zhimg.com/f6dc89ec897cb3f1d601034bacf17597.jpg"
],
"type": 0,
"id": 8945554
},
{
"image_hue": "0x172121",
"title": "这里是广告 · 救救我的手抖症",
"url": "https://daily.zhihu.com/story/8945682",
"hint": " · 4 分钟阅读",
"ga_prefix": "110406",
"images": [
"http://pic3.zhimg.com/2f673d9a2cd3e27894ee9b55e9aaa9e6.jpg"
],
"type": 0,
"id": 8945682
}
]
}
    // 获取当前数据进行保存
var list = that.data.datalist;
    // 然后重新写入数据
that.setData({
datalist: list.concat(arr), // 存储数据
dataListDateCurrent: arr.date,
dataListDateCount: that.data.dataListDateCount + 1 // 统计加载次数
});
},
/**
   * 事件处理
   * scrolltolower 自动加载更多
   */
scrolltolower: function (e) {
var that = this;
    // 加载更多 loading
that.setData({
hothidden: true
})
    // 如果加载数据超过10条
if (this.data.dataListDateCount >= 8) {

      // 加载更多 loading
that.setData({
hothidden: false
});

} else {
/**
       * 发送请求数据
       */
var arr = {
"date": "20161103",
"stories": [{
"image_hue": "0x35361e",
"title": "小事 · 中国版绝命毒师",
"url": "https://daily.zhihu.com/story/8946341",
"hint": "VOL.155",
"ga_prefix": "110322",
"images": [
"http://pic1.zhimg.com/b7415b4b385b4af2142248a99491a544.jpg"
],
"type": 0,
"id": 8946341
},
{
"image_hue": "0x6bb1b3",
"title": "《黑镜》每集都有个小切口，我通过它坠入无限遐想",
"url": "https://daily.zhihu.com/story/8945257",
"hint": "小白免 · 2 分钟阅读",
"ga_prefix": "110321",
"images": [
"http://pic3.zhimg.com/48502622b3cd5c3cf0eb0345f1486bd6.jpg"
],
"type": 0,
"id": 8945257
},
{
"image_hue": "0x7d9bb3",
"title": "「长征五号」发射，中国运载火箭技术水平重回世界前列",
"url": "https://daily.zhihu.com/story/8946221",
"hint": "张巧玲 · 5 分钟阅读",
"ga_prefix": "110320",
"images": [
"http://pic1.zhimg.com/d67a4f397fd0bb11ef38f3d987c3d6a0.jpg"
],
"type": 0,
"id": 8946221
},
{
"image_hue": "0x41240b",
"title": "被骗了这么久，隔夜菜致癌原来是谣言",
"url": "https://daily.zhihu.com/story/8941886",
"hint": "钱程 · 4 分钟阅读",
"ga_prefix": "110320",
"images": [
"http://pic1.zhimg.com/b0476dbcf6f8453ac36b45d0c5c89798.jpg"
],
"type": 0,
"id": 8941886
},
{
"image_hue": "0x954c15",
"title": "给饮料里吹气玩，为什么出来的泡泡都是五 / 六边形？",
"url": "https://daily.zhihu.com/story/8938775",
"hint": "知乎用户 · 3 分钟阅读",
"ga_prefix": "110319",
"images": [
"http://pic1.zhimg.com/50a1beb05da0b82a1864b657aa486ad4.jpg"
],
"type": 0,
"id": 8938775
},
{
"image_hue": "0xb3907d",
"title": "不小心长了个很会存储信息的大脑",
"url": "https://daily.zhihu.com/story/8944969",
"hint": "Han Lu · 3 分钟阅读",
"ga_prefix": "110318",
"images": [
"http://pic3.zhimg.com/b2fdbf4b6f74b2492bf1001ef0f0521e.jpg"
],
"type": 0,
"id": 8944969
},
{
"image_hue": "0x979199",
"title": "知乎好问题 · 记账时如何对开销进行分类？",
"url": "https://daily.zhihu.com/story/8946024",
"hint": " · 1 分钟阅读",
"ga_prefix": "110317",
"images": [
"http://pic3.zhimg.com/4c7a95d26ad6c7c390694ffcc9610146.jpg"
],
"type": 0,
"id": 8946024
},
{
"image_hue": "0xb38930",
"title": "仔细想想，现在春夏秋冬的划分很有问题啊",
"url": "https://daily.zhihu.com/story/8944114",
"hint": "celot Lan · 2 分钟阅读",
"ga_prefix": "110316",
"images": [
"http://pic3.zhimg.com/d81452e0c470dfc956471805a47e417a.jpg"
],
"type": 0,
"id": 8944114
},
{
"image_hue": "0xb38d69",
"title": "三五人围着一锅私房豆角焖面，吃到撑，想想都满足",
"url": "https://daily.zhihu.com/story/8945666",
"hint": "周晓楠 · 2 分钟阅读",
"ga_prefix": "110315",
"images": [
"http://pic2.zhimg.com/ca5b91b79bd6b2a7c30b3d2e38df54c5.jpg"
],
"multipic": true,
"type": 0,
"id": 8945666
},
{
"image_hue": "0x382b27",
"title": "商学、经济学、金融学与管理学，这下终于分清楚了",
"url": "https://daily.zhihu.com/story/8939922",
"hint": "CFMars · 2 分钟阅读",
"ga_prefix": "110314",
"images": [
"http://pic4.zhimg.com/ae33777e44b267628c2cf43b4be40ce3.jpg"
],
"type": 0,
"id": 8939922
},
{
"image_hue": "0x322738",
"title": "易建联脱鞋退场，这次 CBA 球鞋纷争是怎么回事？",
"url": "https://daily.zhihu.com/story/8945305",
"hint": "乌潮 · 8 分钟阅读",
"ga_prefix": "110313",
"images": [
"http://pic4.zhimg.com/ccd5eb02cb8043d8cc0efe08f961373f.jpg"
],
"type": 0,
"id": 8945305
},
{
"image_hue": "0x201924",
"title": "大误 · 最完美的相恋",
"url": "https://daily.zhihu.com/story/8944597",
"hint": "无色方糖 · 2 分钟阅读",
"ga_prefix": "110312",
"images": [
"http://pic4.zhimg.com/1def340cabdea9f46a80e2d045becbd3.jpg"
],
"type": 0,
"id": 8944597
},
{
"image_hue": "0x07387f",
"title": "米是长度，平方米是面积，那米的 1.5 次方呢？",
"url": "https://daily.zhihu.com/story/8943534",
"hint": "wolray · 8 分钟阅读",
"ga_prefix": "110311",
"images": [
"http://pic3.zhimg.com/e840013a1c538a624c8909c8497e007a.jpg"
],
"type": 0,
"id": 8943534
},
{
"image_hue": "0xb3987d",
"title": "想当高产不过气的网红，就不能只靠自己",
"url": "https://daily.zhihu.com/story/8942200",
"hint": "陈悦天 · 2 分钟阅读",
"ga_prefix": "110310",
"images": [
"http://pic4.zhimg.com/eed92b061bf3f0f1b783f9ce9aee381f.jpg"
],
"type": 0,
"id": 8942200
},
{
"image_hue": "0x1c0f0e",
"title": "反正不管做没做，人都是会后悔的",
"url": "https://daily.zhihu.com/story/8943946",
"hint": "友心人 · 8 分钟阅读",
"ga_prefix": "110309",
"images": [
"http://pic4.zhimg.com/1d552b04709121d530b3c6a5ae01d25b.jpg"
],
"type": 0,
"id": 8943946
},
{
"image_hue": "0x747a74",
"title": "我们关系这么亲密，还需要说「谢谢」吗？",
"url": "https://daily.zhihu.com/story/8943519",
"hint": "知乎用户 · 2 分钟阅读",
"ga_prefix": "110308",
"images": [
"http://pic2.zhimg.com/430d9fd7e08c75e0bc2073bd9350eb0d.jpg"
],
"type": 0,
"id": 8943519
},
{
"image_hue": "0x8a7561",
"title": "解释概念不复杂，可实际识别「经济泡沫」真的很难",
"url": "https://daily.zhihu.com/story/8944218",
"hint": "张同斌 · 4 分钟阅读",
"ga_prefix": "110307",
"images": [
"http://pic2.zhimg.com/d2d38b488cf78c00b32295c74227c809.jpg"
],
"type": 0,
"id": 8944218
},
{
"image_hue": "0x45767f",
"title": "有哪些关于糖尿病的谣言？",
"url": "https://daily.zhihu.com/story/8940275",
"hint": "知乎用户 · 4 分钟阅读",
"ga_prefix": "110307",
"images": [
"http://pic2.zhimg.com/5ee5e340e00e87a37c740e4d46efbaa1.jpg"
],
"type": 0,
"id": 8940275
},
{
"image_hue": "0x3a374f",
"title": "读读日报 24 小时热门 TOP 5 · 粉了周星驰二十年",
"url": "https://daily.zhihu.com/story/8944048",
"hint": "编辑部小李 · 1 分钟阅读",
"ga_prefix": "110307",
"images": [
"http://pic2.zhimg.com/8146ea6c9de2e3aa1dd242b370ddd02d.jpg"
],
"type": 0,
"id": 8944048
},
{
"image_hue": "0x32160b",
"title": "瞎扯 · 如何正确地吐槽",
"url": "https://daily.zhihu.com/story/8941966",
"hint": "VOL.1207",
"ga_prefix": "110306",
"images": [
"http://pic3.zhimg.com/a549c6ea6c85d186a04ba0053c69fce2.jpg"
],
"type": 0,
"id": 8941966
},
{
"image_hue": "0x1a1312",
"title": "这里是广告 · 斜杠青年的进阶，是斜杠中年还是高级玩家？",
"url": "https://daily.zhihu.com/story/8942755",
"hint": " · 1 分钟阅读",
"ga_prefix": "110306",
"images": [
"http://pic4.zhimg.com/4f15f1780b767638fe8155bbe543a5bb.jpg"
],
"type": 0,
"id": 8942755
}
]
};
      // 获取当前数据进行保存
var list = that.data.datalist;
      // 然后重新写入数据
that.setData({
datalist: list.concat(arr), // 存储数据
dataListDateCurrent: arr.date,
dataListDateCount: that.data.dataListDateCount + 1 // 统计加载次数
});
}
},
})

项目结构图：