使用column-count简单实现瀑布流布局

效果图:

要点:

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个列表数据,但表象上看一样是瀑布流,渲染更流畅。
 

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了,原文地址《百度、微信小程序使用column-count简单实现瀑布流布局
   

还没有人抢沙发呢~