CSS3 -- column 实现瀑布流布局
使用 CSS column 实现瀑布流布局
关键点，column-count: 元素内容将被划分的最佳列数
关键点，break-inside: 避免在元素内部插入分页符
news-list.axml
news-box组件的axml文件
{{renderData.title}} {{renderData.authorName}} {{renderData.collectCount}}news-box组件写得是什么不重要，重要的是淘宝小程序是将组件内容渲染完成之后拼接到父级页面news-list.axml然后显示在用户视野中的。
页面pages中news-list.axml渲染结果如下：
小橘灯精轻松GET灯泡肌小橘灯精轻松GET灯泡肌小橘灯精轻松GET灯泡肌 Julie 9321
这样就简单了，我们直接在news-list.acss中写就好了，这里用的scss预编译，理解就好了。
news-list.scss文件：
.news-list{ width: 100%; padding: 106rpx 24rpx 24rpx; box-sizing: border-box; column-count:2; // CSS3 -- column 实现瀑布流布局 column-width:46%; column-gap: 0; .news-box{ break-inside: avoid; display: block; width: 100%; margin: 0 9rpx 24rpx 9rpx; }}。
详解：
父级元素：.news-list
width: 100%;宽度100%；
column-count:2;元素内容将被划分的最佳列数为2列；
column-width:46%;列的宽度为父元素宽度的46%；
column-gap: 0;元素内容分为两列，并列间 0 像素的间隔。后面自己去规定。
子级元素：.news-box
break-inside: avoid;避免在元素内部插入分页符。
