写在前面
这几天在做一个图片下载小程序,希望图片能够分三列进行瀑布流布局。我也是个新手,走了很多弯路,看了很多代码。试过很多方法。有把view容器分成二列用二个数组分别渲染的方法。也有直接用css3得理的方法。反正方法很多。无论那一种简单最为方便。下面就分享一下我自己的方法。css3+js简单处理。
css代码
.list_item_box{
width: 100%;
column-count:3;
column-gap:0rpx ;
}
.list_item{
width: 220rpx;
border-radius: 15rpx;
box-shadow: 2rpx 2rpx 10rpx #a7a5a5;
page-break-inside: avoid;
margin:10rpx;
clear:both;display:inline-block;
}
容器说明:list_item_box为父元素,list_item为子元素。
代码说明:column-count:3上是将父元素分成三列,page-break-inside: avoid;是让元素不被割断。clear:both;display:inline-block;是让子元素能够均匀分配到三列中,不然左边多,右边少。
缺点:就是子元素要从第一列左边开始往下,最后才到第三列。显示顺序的点问题。
解决方案:如果对顺序没什么要求的话直接就不用管。如果 有要求,那个把数据重新按三列的顺序重新遍历一下就好了。
优点:比其他方案中的用js判断两边高度进行渲染简单的多。