
效果图:
要点:
css3:
column-count: 2;
column-gap:4px;
把元素分成2列
讲解
页页结构:
<view class="content">
<viewclass="view-li"s-for="{{news}}"s-key="item.id">
<image style="width:100%;" mode="widthFix" lazy-load preview src="{{item.img[0]}}"/>
</view>
</view>
widthFix 图片高度根据宽度成比例自动缩放
css部分:
.content{
padding:04px;
column-count:2;
column-gap:4px;
}
---------------------------
其实这个不是最好的方法,我后来还是用2列来做,分别输出2个列表数据,但表象上看一样是瀑布流,渲染更流畅。
还没有人抢沙发呢~