index.js

const userCases = {
  微信小程序: [
    {
      name: "京东购物",
      url: "http://storage.jd.com/taro-resource/cases/京东购物.png"
    },
    {
      name: "TOPLIFE",
      url: "http://storage.jd.com/taro-resource/cases/TOPLIFE.png"
    },
    {
      name: "7FRESH",
      url: "http://storage.jd.com/taro-resource/cases/image20.jpeg"
    },
    {
      name: "玲珑",
      url: "http://storage.jd.com/taro-resource/cases/玲珑.png"
    },
    {
      name: "一起有局",
      url: "http://storage.jd.com/taro-resource/cases/一起有局.png"
    },
    {
      name: "荐一物",
      url: "http://storage.jd.com/taro-resource/cases/jian.png"
    },
    {
      name: "壹赫兹",
      url: "http://storage.jd.com/taro-resource/cases/hz.png"
    },
    {
      name: "京品百货",
      url: "http://storage.jd.com/taro-resource/cases/image4.png"
    },
    {
      name: "Taro UI",
      url: "http://storage.jd.com/taro-resource/cases/image16.jpeg"
    },
    {
      name: "淘票票",
      url: "https://img.alicdn.com/tfs/TB1RoXxixD1gK0jSZFyXXciOVXa-430-430.png"
    },
    {
      name: "豆芽名片",
      url: "https://user-images.githubusercontent.com/16730031/64512839-d0aaac00-d319-11e9-94fb-7d10b9bc2b22.jpg"
    },
    {
      name: "吐个槽社区",
      url: "http://storage.jd.com/taro-resource/cases/image3.png"
    },
    {
      name: "轻松问卷",
      url: "http://storage.jd.com/taro-resource/cases/image5.png"
    },
    {
      name: "喵呜部落",
      url: "http://storage.jd.com/taro-resource/cases/image4.jpeg"
    },
    {
      name: "小鱼的信",
      url: "http://storage.jd.com/taro-resource/cases/image6.jpeg"
    },
    {
      name: "罗网部落",
      url: "http://storage.jd.com/taro-resource/cases/image2.jpeg"
    },
    {
      name: "学区房",
      url: "http://storage.jd.com/taro-resource/cases/image8.jpeg"
    },
    {
      name: "还呗申请",
      url: "http://storage.jd.com/taro-resource/cases/image18.jpeg"
    },
    {
      name: "多趣游戏盒",
      url: "http://storage.jd.com/taro-resource/cases/image23.jpeg"
    },
    {
      name: "妈妈医选",
      url: "http://storage.jd.com/taro-resource/cases/image29.jpeg"
    },
    {
      name: "uCourse",
      url: "http://storage.jd.com/taro-resource/cases/image9.jpeg"
    },
    {
      name: "作业部落",
      url: "http://storage.jd.com/taro-resource/cases/image7.jpeg"
    },
    {
      name: "开始喝茶",
      url: "http://storage.jd.com/taro-resource/cases/image10.jpeg"
    },
    {
      name: "多肉宝宝",
      url: "http://storage.jd.com/taro-resource/cases/image11.jpeg"
    },
    {
      name: "工资算一算",
      url: "http://storage.jd.com/taro-resource/cases/image12.jpeg"
    },
    {
      name: "精巧待办事项",
      url: "http://storage.jd.com/taro-resource/cases/image13.jpeg"
    },
    {
      name: "君博教育",
      url: "http://storage.jd.com/taro-resource/cases/image24.jpeg"
    },
    {
      name: "吉珠小助手",
      url: "http://storage.jd.com/taro-resource/cases/image28.jpeg"
    },
    {
      name: "掌 buy",
      url: "http://storage.jd.com/taro-resource/cases/image14.jpeg"
    },
    {
      name: "脑洞阅读",
      url: "http://storage.jd.com/taro-resource/cases/image3.jpeg"
    },
    {
      name: "指尖推",
      url: "http://storage.jd.com/taro-resource/cases/image1.png"
    },
    {
      name: "良乌深触",
      url: "http://storage.jd.com/taro-resource/cases/image17.jpeg"
    },
    {
      name: "猫眼试用",
      url: "http://storage.jd.com/taro-resource/cases/maoyan.png"
    },
    {
      name: "新笑傲福利站",
      url: "http://storage.jd.com/taro-resource/cases/image21.jpeg"
    },
    {
      name: "万邦法务",
      url: "http://storage.jd.com/taro-resource/cases/image25.jpeg"
    },
    {
      name: "我要个性",
      url: "http://storage.jd.com/taro-resource/cases/image27.jpeg"
    },
    {
      name: "时装衣橱",
      url: "http://storage.jd.com/taro-resource/cases/image22.jpeg"
    },
    {
      name: "税扣扣",
      url: "http://storage.jd.com/taro-resource/cases/image26.jpeg"
    },
    {
      name: "小来打卡 Pro",
      url: "http://storage.jd.com/taro-resource/cases/image5.jpeg"
    },
    {
      name: "精雀赛事",
      url: "http://storage.jd.com/taro-resource/cases/image31.jpeg"
    },
    {
      name: "车轮社区",
      url: "http://storage.jd.com/taro-resource/cases/image32.jpeg"
    },
    {
      name: "斗店",
      url: "http://storage.jd.com/taro-resource/cases/image33.jpeg"
    },
    {
      name: "低碳打卡",
      url: "http://storage.jd.com/taro-resource/cases/image34.jpeg"
    },
    {
      name: "优投房",
      url: "http://storage.jd.com/taro-resource/cases/image35.jpeg"
    },
    {
      name: "湖人赛程",
      url: "http://storage.jd.com/taro-resource/cases/image30.jpeg"
    },
    {
      name: "印象分",
      url: "http://storage.jd.com/taro-resource/cases/image19.jpeg"
    },
    {
      name: "秀设计",
      url: "http://storage.jd.com/taro-resource/cases/image15.jpeg"
    },
    {
      name: "戒烟助理",
      url: "https://github.com/hugetiny/quit-smoking/raw/master/weappcode.jpg"
    },
    {
      name: "酒桌gameing",
      url: "https://raw.githubusercontent.com/YTU94/taro-weapp/master/static/QQ20190718-0.png"
    },
    {
      name: "赛后",
      url:
        "https://user-images.githubusercontent.com/3993655/50722899-28e93880-1111-11e9-8647-3761b59926a1.jpg"
    },
    {
      name: "Gitter",
      url:
        "https://user-images.githubusercontent.com/8692455/51429898-b159f400-1c4e-11e9-91a1-59cd1fab5042.png"
    },
    {
      name: "前端小助手",
      url:
        "https://user-images.githubusercontent.com/8676711/51724267-84b33b80-2097-11e9-98ed-b4cf94aacb5b.jpg"
    },
    {
      name: "尾巴生活",
      url:
        "https://user-images.githubusercontent.com/25095653/51814579-ecb38d00-22f6-11e9-8b45-9f3505baace6.jpg"
    },
    {
      name: "时时慢",
      url:
        "https://user-images.githubusercontent.com/1301338/51829422-73cd2900-2328-11e9-9a8f-443d9c1eff15.jpg"
    },
    {
      name: "最佳专辑",
      url:
        "https://user-images.githubusercontent.com/1298241/51992353-cdc81d00-24e7-11e9-98ea-17f32aa873cb.jpg"
    },
    {
      name: "Unsplash",
      url:
        "https://user-images.githubusercontent.com/18414813/52836944-b152f400-3127-11e9-8891-db950c3e7c85.jpeg"
    },
    {
      name: "爱享到",
      url:
        "https://user-images.githubusercontent.com/14814560/52850000-63e97d80-314d-11e9-8e03-57e15d17900d.jpg"
    },
    {
      name: "Giteer",
      url:
        "https://user-images.githubusercontent.com/13462780/53848985-5a875e80-3ff1-11e9-836b-10d3d07658db.jpg"
    },
    {
      name: "剪刀侠",
      url:
        "https://user-images.githubusercontent.com/7202516/57500122-b2ee1b80-7314-11e9-9fda-e6e6f44b9230.png"
    },
    {
      name: "AE-EDIT",
      url:
        "https://user-images.githubusercontent.com/24741025/53931673-25ead400-40d1-11e9-84f5-4e217dfc9f4f.jpg"
    },
    {
      name: "Natsuha Weather",
      url:
        "https://user-images.githubusercontent.com/7202516/57504280-73c8c600-7326-11e9-896f-733991ac58d2.jpg"
    },
    {
      name: "备案查询助手",
      url:
        "https://user-images.githubusercontent.com/25195267/54258064-65fffa00-459c-11e9-9cc2-4ff4e6dba973.jpg"
    },
    {
      name: "钢琴轻音乐曲谱",
      url:
        "https://raw.githubusercontent.com/zhouran19880120/ad/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%A0%81.jpg"
    },
    {
      name: "启东实时公交",
      url:
        "https://user-images.githubusercontent.com/7202516/57913946-42b93a00-78c0-11e9-862b-a732eb28a179.jpeg"
    },
    {
      name: "动态密码验证",
      url:
        "https://camo.githubusercontent.com/6127c7c6c0fd2801ba1fa5557eafebbb7c5ca206/68747470733a2f2f692e6c6f6c692e6e65742f323031392f30332f32322f356339343730643364636137302e6a7067"
    },
    {
      name: "距离多远",
      url:
        "https://user-images.githubusercontent.com/6435874/54963306-422cb300-4fa3-11e9-8c0c-bde74cd43833.png"
    },
    {
      name: "业之峰装饰",
      url: "https://yenova-bucket1.oss-cn-qingdao.aliyuncs.com/2019/yzfxcx.png"
    },
    {
      name: "魔方9号楼",
      url:
        "https://user-images.githubusercontent.com/7202516/57462386-560a4b00-72ab-11e9-903e-c449ab9d1c25.jpg"
    },
    {
      name: "小地铁通",
      url:
        "https://user-images.githubusercontent.com/7202516/57452352-26047d00-7296-11e9-9ead-08737c540ea0.jpg"
    },
    {
      name: "马卡龙玩图",
      url:
        "https://static01.versa-ai.com/upload/09e8ff91612b/37f5a990-6037-4ebf-a3c8-ae38b0b07270.jpg"
    },
    {
      name: "酸壁纸",
      url:
        "https://user-images.githubusercontent.com/7885757/56015407-8e118300-5d2b-11e9-87ae-003589cb5069.jpg"
    },
    {
      name: "报考管家",
      url:
        "https://user-images.githubusercontent.com/20960902/55077973-02b1b400-50d4-11e9-8023-d33edd936dfe.jpg"
    },
    {
      name: "奇妙壁纸",
      url:
        "https://user-images.githubusercontent.com/36564529/55272719-b9dc4400-52fb-11e9-8efd-853941474a4b.png"
    },
    {
      name: "集客商城",
      url:
        "https://user-images.githubusercontent.com/2168473/56793629-0190b580-683f-11e9-8cdb-f540d941a4bf.png"
    },
    {
      name: "拼多多卷商",
      url:
        "https://user-images.githubusercontent.com/2168473/56793746-43216080-683f-11e9-926d-e456ed648550.png"
    },
    {
      name: "题多多搜题",
      url:
        "https://user-images.githubusercontent.com/16409424/56859246-a4ba0a00-69ba-11e9-9941-d43e3cdebef0.png"
    },
    {
      name: "Koopa",
      url:
        "https://user-images.githubusercontent.com/13031838/57196074-e4b95800-6f8b-11e9-9a61-3bcdd45c2062.jpg"
    },
    {
      name: "激似",
      url:
        "https://user-images.githubusercontent.com/7518455/57525808-4ac42780-735e-11e9-8955-f163775168b0.jpg"
    },
    {
      name: "豆豆菜谱",
      url:
        "https://user-images.githubusercontent.com/7202516/57913059-5b285500-78be-11e9-9b05-97f6e567f7c8.jpeg"
    },
    {
      name: "你头像真棒",
      url:
        "https://user-images.githubusercontent.com/31771183/57899485-d1fa2980-788f-11e9-923c-9af4ab2e3854.jpg"
    },
    {
      name: "听一听",
      url:
        "https://user-images.githubusercontent.com/127009/57964828-312e6b80-796e-11e9-9401-eb98405dd0de.jpg"
    },
    {
      name: "宝宝乐学",
      url:
        "https://user-images.githubusercontent.com/5229158/57964786-cbda7a80-796d-11e9-8369-d914f5a8d4ff.jpg"
    },
    {
      name: "贝壳学堂",
      url:
        "https://user-images.githubusercontent.com/18849626/57982872-8e651280-7a7d-11e9-9b78-dd6136d63248.png"
    },
    {
      name: "SteamCN",
      url:
        "https://user-images.githubusercontent.com/9652227/58032363-08b49600-7b55-11e9-9d0f-469fbdf88ad3.png"
    },
    {
      name: "学伴",
      url:
        "https://user-images.githubusercontent.com/7202516/58466803-03ff6b80-816d-11e9-8afd-f56bdff5a60a.jpg"
    },
    {
      name: "NBA数据统计",
      url:
        "https://user-images.githubusercontent.com/3993655/58761178-d43cd300-8573-11e9-9066-c05fc7452457.png"
    },
    {
      name: "创业问",
      url:
        "https://user-images.githubusercontent.com/7202516/58928098-b940ad80-8783-11e9-91e3-f2c2d1359f91.jpg"
    },
    {
      name: "种子备忘录",
      url:
        "https://raw.githubusercontent.com/wxingheng/example/master/images/todo_list.png"
    },
    {
      name: "程序员英语",
      url:
        "https://user-images.githubusercontent.com/7202516/59607522-0fc7c780-9146-11e9-8753-ea9f80d3021a.jpg"
    },
    {
      name: "电商零售案例",
      url:
        "https://github.com/IooBot/taro-shop-graphql/raw/master/screenshots/ecommerce_xcx.jpg"
    },
    {
      name: "数字酋长客服",
      url: "https://user-images.githubusercontent.com/7202516/59986775-c0642880-966a-11e9-83d9-79f66087d1f2.jpg"
    },
    {
      name: "麦德龙到家",
      url: "https://user-images.githubusercontent.com/9426456/60314192-5a421300-9994-11e9-9448-a0806a975263.jpg"
    },
    {
      name: "天宝国际航服",
      url: "https://raw.githubusercontent.com/TigerHee/taro-init/master/src/assets/img/xcx.jpg"
    },
    {
      name: "弦弹格格",
      url: "https://dev.tencent.com/u/bizbetter/p/appresource/git/raw/master/images/appimg/mychords/ads/qr_green.jpg"
    },
    {
      name: "最美退役军人",
      url: "https://cache-1256738511.cos.ap-chengdu.myqcloud.com/images/vote.jpg"
    },
    {
      name: "赫兹品牌服务",
      url: "https://cache-1256738511.cos.ap-chengdu.myqcloud.com/images/hotel.jpg"
    },
    {
      name: '幻熊科技',
      url: 'https://user-images.githubusercontent.com/7202516/64671021-b7c90480-d499-11e9-83af-007a428d57ca.jpg',
    },
    {
      name: '表情包自制大师',
      url: 'https://blog-1254147258.cos.ap-guangzhou.myqcloud.com/ercode/wechat.jpg',
    },
    {
      name: 'Astron',
      url: 'https://github.com/jevonsofcode/Astron/raw/master/READMESOURCE/qrcode.jpg',
    },
    {
      name: "智科车联",
      url: "http://itink.com.cn/assets/weapp/itink.jpg"
    },
    {
      name: "袋小鼠爱编程",
      url: "https://www.tdreamer.com/images/codekidtop/weixin_mp_qrcode.jpg"
    },
    {
      name: "古典音乐品鉴",
      url: "https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/weapp.jpg"
    },
    {
      name: "睿推客",
      url: "https://wx.ryuntech.com/upload/20190911184122.jpg"
    },
    {
      name: "四六级管家",
      url: "https://user-images.githubusercontent.com/7202516/66696220-965b7280-ecfc-11e9-8b09-171dd4700c5a.jpg"
    },
    {
      name: "剃头推子",
      url: "https://user-images.githubusercontent.com/7202516/66696219-965b7280-ecfc-11e9-9f4e-dc312afbe7ab.jpg"
    },
    {
      name: "给我去水印",
      url: "https://user-images.githubusercontent.com/3080820/68095428-83475700-fee4-11e9-80f5-f985d516baaf.jpg"
    },
    {
      name: "军运小助手",
      url: "https://user-images.githubusercontent.com/9426456/66698390-45ee1000-ed10-11e9-826e-310cf96f7ed8.jpg"
    },
    {
      name: "AI导诊",
      url: "https://user-images.githubusercontent.com/3080820/66974069-8fea4380-f0cc-11e9-8a7b-e95a5b7c34d4.png"
    },
    {
      name: "AI预诊",
      url: "https://user-images.githubusercontent.com/3080820/66974120-bb6d2e00-f0cc-11e9-8e9c-113ab77d94a8.png"
    },
    {
      name: "郑州长途客运",
      url: "https://user-images.githubusercontent.com/23094123/68311776-02a77700-00ed-11ea-805c-5927e944abe3.JPG"
    },
    {
      name: "龙湖冠寓租房",
      url: "https://user-images.githubusercontent.com/3080820/68370238-fd8f0a00-0176-11ea-8a2b-32bea244bc35.jpg"
    },
    {
      name: "甩甩宝宝",
      url: "https://camo.githubusercontent.com/8f0cec6cae8b210c496239f731f0598d0afd5390/68747470733a2f2f77782e73716d69616f3030312e636f6d2f6173737365742f7a7567616e672f62616f62616f2f636f64655f68352e6a7067"
    },
    {
      name: "微赛通",
      url: "https://user-images.githubusercontent.com/3080820/69857235-742cac80-12ca-11ea-8f66-dadbc06f2ec7.jpg"
    },
    {
      name: "美餐",
      url: "https://camo.githubusercontent.com/aa8cd4985a4d2d73692c42ffc40bc1276a50805a/68747470733a2f2f7777772e6d656963616e7374617469632e636f6d2f7374612f66652f6d656963616e2d6170702f6d656963616e2d6d702f696d616765732f6d70636f64652e6a7067"
    },
    {
      name: "画线九宫格",
      url: "https://user-images.githubusercontent.com/3080820/72341163-8a6cbb80-3704-11ea-89ea-ac3749825ad0.jpg"
    }
  ],
  H5: [
    {
      name: "袋小鼠爱编程",
      url: "https://www.tdreamer.com/images/codekidtop/h5_web_qrcode.png"
    },
    {
      name: "作业部落",
      url:
        "https://user-images.githubusercontent.com/7202516/57504894-efc40d80-7328-11e9-9414-518c5b20e301.png"
    },
    {
      name: "猫眼电影",
      url:
        "https://user-images.githubusercontent.com/15929863/43410114-6ba5ae00-9458-11e8-8f2a-e2ab9d8c4141.png"
    },
    {
      name: "指尖推",
      url: "http://storage.jd.com/taro-resource/cases/zhijian_h5.png"
    },
    {
      name: "时装衣橱",
      url:
        "https://github.com/EasyTuan/taro-msparis/raw/master/screenshots/qr-code.png"
    },
    {
      name: "仿网易严选",
      url:
        "https://camo.githubusercontent.com/b0f85f75689c94ebf935d1d924d73f381153277e/68747470733a2f2f7169742d7465616d2e6769746875622e696f2f7075626c69632f696d616765732f7461726f2d79616e7875616e2f68352d71722d636f64652e706e67"
    },
    {
      name: "淘宝卷商",
      url:
        "https://user-images.githubusercontent.com/2168473/56794061-f68a5500-683f-11e9-90ba-32e878dca9c3.png"
    },
    {
      name: "报考管家",
      url:
        "https://user-images.githubusercontent.com/20960902/55078112-53291180-50d4-11e9-8876-21a270fec3f1.png"
    },
    {
      name: "学伴",
      url:
        "https://user-images.githubusercontent.com/7202516/58466807-06fa5c00-816d-11e9-81ec-9be385d8a4d1.png"
    },
    {
      name: "每日好心情",
      url:
        "https://user-images.githubusercontent.com/7972688/64514458-3cdadf00-d31d-11e9-8494-4262c6d4d565.jpg"
    }
  ],
  支付宝小程序: [
    {
      name: "时光简纸",
      url:
        "https://user-images.githubusercontent.com/30850497/52847223-8deb7180-3146-11e9-90f4-e668233284f9.jpg"
    },
    {
      name: "爱享到",
      url:
        "https://user-images.githubusercontent.com/14814560/52850049-84193c80-314d-11e9-8048-e4b48edeadf1.png"
    },
    {
      name: "趣叨叨古典音乐",
      url:
        "https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/alipay.jpg"
    },
    {
      name: "货拉拉",
      url: "https://raw.githubusercontent.com/Andrewuetyang/pics/master/hll_alipay_mp.png"
    }
  ],
  百度智能小程序: [
    {
      name: "京东好物街",
      url: "http://storage.jd.com/taro-resource/cases/haowujie.png"
    },
    {
      name: "启信宝",
      url:
        "https://user-images.githubusercontent.com/38108442/54411078-fcf9bd00-4728-11e9-9e4d-c61f6ff43f86.png"
    },
    {
      name: "业之峰装饰集团",
      url:
        "https://yenova-bucket1.oss-cn-qingdao.aliyuncs.com/2019/yzfbdxcx.png"
    },
    {
      name: "钢琴轻音乐曲谱",
      url:
        "https://raw.githubusercontent.com/zhouran19880120/ad/master/baidu_miniprogram.png"
    },
    {
      name: "柠檬爱美",
      url:
        "https://user-images.githubusercontent.com/7202516/57913062-60859f80-78be-11e9-9eeb-4543d17f5218.png"
    },
    {
      name: "袋小鼠爱编程",
      url: "https://www.tdreamer.com/images/codekidtop/swan_mp_qrcode.jpg"
    },
    {
      name: "淘票票",
      url: "https://img.alicdn.com/tfs/TB19p4xiBr0gK0jSZFnXXbRRXXa-150-150.png"
    },
    {
      name: "趣叨叨古典音乐",
      url: "https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/swan.png"
    },
    {
      name: "画线九宫格",
      url: "https://raw.githubusercontent.com/zhouran19880120/ad/master/draw9/swan.png"
    }
  ],
  移动端应用: [
    {
      name: "袋小鼠爱编程",
      url: "https://www.tdreamer.com/images/codekidtop/ios_app_qrcode.jpg"
    },
    {
      name: "仿网易严选",
      url:
        "https://qr.api.cli.im/qr?data=https%253A%252F%252Fsnack.expo.io%252F%2540caiminxing%252Ftaro-yanxuan&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=ad14cc9c74800daec783744be81d68d8"
    }
  ],
  QQ小程序: [
    {
      name: "袋小鼠爱编程",
      url: "https://www.tdreamer.com/images/codekidtop/qq_mp_qrcode.jpg"
    },
    {
      name: "表情包大师",
      url:
        "https://blog-1254147258.cos.ap-guangzhou.myqcloud.com/ercode/QQ.png"
    },
    {
      name: "古典音乐品鉴",
      url:
        "https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/qq.png"
    },
    {
      name: "四六级管家",
      url: "https://user-images.githubusercontent.com/7202516/66696217-95c2dc00-ecfc-11e9-99cd-ae06ad08654e.png"
    },
    {
      name: "剃头推子",
      url: "https://user-images.githubusercontent.com/7202516/66696218-95c2dc00-ecfc-11e9-98a6-dad868590c79.png"
    },
    {
      name: "给我去水印",
      url: "https://user-images.githubusercontent.com/3080820/68095430-86424780-fee4-11e9-8882-95f7a3f45dee.png"
    },
    {
      name: "画线九宫格",
      url: "https://user-images.githubusercontent.com/3080820/72341326-e5061780-3704-11ea-8434-8a9ff0e01399.png"
    }
  ],
    字节跳动小程序: [
    {
      name: "袋小鼠爱编程",
      url: "https://www.tdreamer.com/images/codekidtop/tt_mp_qrcode.jpg"
    },
    {
      name: "淘票票",
      url: "https://img.alicdn.com/tfs/TB1qxXripY7gK0jSZKzXXaikpXa-150-150.png"
    },
    {
      name: "古典音乐品鉴",
      url: "https://raw.githubusercontent.com/zhouran19880120/ad/master/100stories/tt.jpg"
    }
  ]
};

function chunkArray(ary) {
  const tempAry = [];
  const MAX_COLUMN = 8;
  for (let i = 0; i < ary.length; i += MAX_COLUMN) {
    tempAry.push(ary.slice(i, i + MAX_COLUMN));
  }
  if (tempAry[0].length < MAX_COLUMN) {
    tempAry[0].push(...Array(MAX_COLUMN - tempAry[0].length).fill({}));
  }
  return tempAry;
}

function renderCases(cases) {
  var navhtml = Object.keys(cases).map(key => {
    return `<a href='#${key}'>${key}<span>(${cases[key].length})</span></a>`
  }).join('')
  navhtml = `<div class='grid_c1 app_nav'>${navhtml}</div>`

  var casehtml =  Object.keys(cases)
    .map(key => {
      return `
      <h2 id=${key}>${key}</h2>
      <table
        border="0"
        cellpadding="0"
        cellspacing="0"
      >
      <tbody>
        ${renderTr(cases[key])}
      </tbody>
      </table>
    `;
    })
    .join("");
  return navhtml + casehtml
}

function renderTr(arr) {
  return chunkArray(arr)
    .map(a => {
      return `<tr>
        ${a
          .map(o => {
            return `<td align="center">
                  <img class="${
                    o.url ? "" : "hidden"
                  }" height="80" width="80" src="${o.url}" />
                  <p class="${o.url ? "" : "hidden"}">${o.name}</p>
                </td>`;
          })
          .join("")}
      </tr>
    `;
    })
    .join("");
}

document.getElementById("app").innerHTML = renderCases(userCases);