参考：作者：阿峰链接：https://www.jianshu.com/p/14d4b9ac473c来源：简书1.column-count属性指定元素应在的列数由:-moz-column-count:3分隔；/*Firefox*/-webkit-column-count:3;/*Safari和Chrome*/column-count:3;2.column-gap属性指定列之间的间距：-moz-column-gap:40px；/*Firefox*/-webkit-column-gap:40px;/*Safari和Chrome*/column-gap:40px;3.column-rule属性设置列与颜色规则之间的宽度和样式。-moz-column-rule:3px开始#ff0000;/*Firefox*/-webkit-column-rule:3pxoutset#ff0000;/*Safari和Chrome*/column-rule:3pxoutset#ff0000;4.column-span属性指定元素应该跨越多少列。InternetExplorer10和Opera支持column-span属性。Safari和Chrome支持替代的-webkit-column-span属性。/只有Chrome和Opera支持column-span属性。/-webkit-column-span:all;/*Chrome*/column-span:all;5.column-width属性指定列的宽度。InternetExplorer10和Opera支持列宽属性。Firefox支持替代的-moz-column-width属性。Safari和Chrome支持备用的-webkit-column-width属性。注意：InternetExplorer9和更早版本的浏览器不支持column-width属性。列宽：100px；-moz-列宽：100px；/*Firefox*/-webkit-column-width:100px;/*Safari和Chrome*/微信小程序瀑布流布局wxml{{item.title}}wxsspage{背景颜色：#eee;}.case-page{填充：20rpx;}.list-masonry{列数：2;列间距：20rpx;}.item-masonry{背景颜色：#fff;break-inside:avoid;/*避免在元素内部插入分页符*/box-sizing:border-box;填充：20rpx；margin-bottom:20rpx;}.item-masonryimage{width:100%;}JSPage({/***页面初始数据*/data:{imgWidth:0,imgHeight:0,note:[{title:'案例名称',url:'http://zq.jhcms.cn/attachs/photo/201711/20171130_176CFE51B6710715B1BBBEF2F86ACB0C.jpg',},{title:'你不知道的红酒知识',url:'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',},{title:'红酒知识',url:'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',},{title:'案例名称',url:'http://zq.jhcms.cn/attachs/photo/201711/20171130_9E39DA252E3946BE36218D85876C4AB4.jpg',},{title'案例名称',url:'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'},{title:'案例名称',url:'http://f10.baidu.com/it/u=121654667,1482133440&fm=72'},{title:'案例名称',url:'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg'},{title:'案例名称',url:'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg'},{title:'案例名称',url:'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg'}]}})
