【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;
	}