小程序列表图片瀑布流
样板是小程序。其他各种框架,技术都能实现,纯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;
}