【css3技巧(二)】之图片列表瀑布流（超简单css3实现瀑布流）

小程序列表图片瀑布流

样板是小程序。其他各种框架，技术都能实现，纯css.

1、view

主要是图片的widthFix属性，宽度固定，高度自适应比例。

<view class="falls">
		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(7).jpg" mode="widthFix">image>
		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(5).jpg" mode="widthFix">image>
		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(6).jpg" mode="widthFix">image>
		<image class="img" src="https://t.7wpp.com/static/imgs/img%20(11).jpg" mode="widthFix">image>
view>

2、css

基于uni-app的单位，其他小程序请自己改，主要用到css3的column-count属性；
可以说是文档流，刚好结合图片的widthFix，数字代表几列。

.falls{
		width: 100%;
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		.img{
			margin-bottom: 20upx;
			border-radius: 10upx;
			}
		}

3、遇到的问题

单张图片还好，上面的实现方式，放入其他内容，有可能被切割到另一列。

解决方法：在子列表中加入，height:100%;overflow:auto;

.list{
		height:100%;
		overflow: auto;
		border-radius:20upx;
		margin-bottom:30upx;
		box-shadow:0px 6upx 13upx 1upx rgba(51,51,51,0.1);
		.l_img{
			border-radius:20upx 20upx 0px 0px;
	}