微信小程序 —— 瀑布流简单写法（css3属性加wx：if判断轻松实现）

css3中的column-count 规定元素应该被分隔的列数。

纯css3完成瀑布流具体思路：

 1. 先用css3中的column-count属性把页面元素分为俩列及多列。2. 再用wx:if="{{item.id%2！=''}}来判断那一列的哪些元素需要隐藏，哪些元素需要显示。

具体代码：

wxml:

<view class="free-panel-title">纯css3瀑布流布局 ( 利用css3的column-＊属性 )</view><view class="free-WaterfallFlow"><block><view class="flex-wrap" wx:for="{{images}}" wx:key='{{item.src}}' wx:if="{{item.id%2!=''}}"><image mode="widthFix" src="{{item.src}}"></image><view>{{item.name}}</view><view>{{item.data}}</view></view></block><block><view class="flex-wrap" wx:for="{{images}}" wx:key='{{item.src}}'wx:if="{{item.id%2==''}}"><image mode="widthFix" src="{{item.src}}"></image><view>{{item.name}}</view><view>{{item.data}}</view></view></block></view>

wxss

.free-WaterfallFlow{width:94%;column-count:2;/*column-count 属性规定元素应该被分隔的列数：*/
}
.free-WaterfallFlow .flex-wrap{display: inline-block;width:98%;margin-bottom:2%;border:1px solid #ccc;padding:2%;padding-top:5%;margin-right:2%;box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);text-align: center;
}
.flex-wrap image{width:95%;margin:0 auto;
}
.flex-wrap view:nth-child(2){font-size:15px;padding:2% 0;color:#717171;
}
.flex-wrap view:nth-child(3){font-size:13px;padding:2% 0;color:#aaa;text-align: right;
}

js:

 images:[{ id:'1',src:'../../images/pubuliu/01.jpg',name:'照片01',data:'2017/11/1'}, {id: '2',src: '../../images/pubuliu/02.jpg',name: '照片02',data: '2017/11/2'}, {id: '3',src: '../../images/pubuliu/03.jpg',name: '照片03',data: '2017/11/3'}, {id: '4',src: '../../images/pubuliu/04.jpg',name: '照片04',data: '2017/11/4'}, {id: '5',src: '../../images/pubuliu/05.jpg',name: '照片05',data: '2017/11/5'}, {id: '6',src: '../../images/pubuliu/06.jpg',name: '照片06',data: '2017/11/6'}, {id: '7',src: '../../images/pubuliu/07.jpg',name: '照片07',data: '2017/11/7'}, {id: '8',src: '../../images/pubuliu/08.jpg',name: '照片08',data: '2017/11/8'}, {id: '9',src: '../../images/pubuliu/07.jpg',name: '照片09',data: '2017/11/9'}, {id: '10',src: '../../images/pubuliu/08.jpg',name: '照片10',data: '2017/11/10'}, {id: '11',src: '../../images/pubuliu/04.jpg',name: '照片11',data: '2017/11/11'}, {id: '12',src: '../../images/pubuliu/05.jpg',name: '照片12',data: '2017/11/12'}, {id: '13',src: '../../images/pubuliu/06.jpg',name: '照片13',data: '2017/11/13'}, {id: '14',src: '../../images/pubuliu/07.jpg',name: '照片14',data: '2017/11/14'}, {id: '15',src: '../../images/pubuliu/05.jpg',name: '照片15',data: '2017/11/15'}, {id: '16',src: '../../images/pubuliu/07.jpg',name: '照片16',data: '2017/11/16'}, {id: '17',src: '../../images/pubuliu/06.jpg',name: '照片17',data: '2017/11/17'},]

微信小程序 —— 瀑布流简单写法（css3属性加wx：if判断轻松实现）相关推荐

android商品数量加减,微信小程序实现一个简单的商品数量加减案例
简介这是一个用微信小程序原生代码实现的数量加减demo,主要是用于商品购物车或者商品详情修改数量使用,很简单哦~~~. 核心js方法说明addCount(增加数量) delCount (减少数量) ...
uview 瀑布流_微信小程序瀑布流最好最简单的解决方案
网上能搜到的小程序瀑布流解决方案,要么代码复杂.逻辑混乱,要么实现不了业务功能,所以把我在项目中的实现方案给大家分享下. 最简单的实现方案,不适用有分页的场景. 这个方案简单的原因是因为仅仅使用了cs ...
微信小程序瀑布流的实现
今天介绍下瀑布流的实现,在客服端想实现这种布局都提供了方法,在微信小程序中只能通过css提供的方式自己布局. 想实现这种效果其实可以使用css的方法直接放成两列就可以了column-count:2; ...
微信小程序--瀑布流加载
本文主要介绍小程序的瀑布流加载.实现的原理是,通过bindload监听图片加载,然后计算每张图片的高度,将list根据高度分别,创建2个新数组col1.col2. 1..xml <view cl ...
微信小程序 - - - - - 瀑布流效果实现
瀑布流效果 1. 瀑布流 1.1 什么叫瀑布流? 1.2 瀑布流有什么优点? 1.3 如何实现瀑布流的关键是什么? 2. 实现思路 2.1 思路梳理 2.2 实现瀑布流对于一些小程序,关于瀑布流的需 ...
微信小程序瀑布流列表
客户讲列表不好看要瀑布流,搞了半天没搞好,一行两列,总是高度高的决定一行的高度,flex解决不了找了网上的方法.有个比较暴力的思路:整个页面左右分成两列,单列只显示一篇文章的宽度,左列显示奇数,右列 ...
微信小程序瀑布流实现
瀑布流这就是大概的效果一.WXML 这个是完整的两个板块,其实具体里面是什么不重要,重要的是两个最外层的view标签: <view class="pubu_left" i ...
微信小程序、流应用、原生应用app、轻应用
引言介绍: 应用分为:原生应用(Native APP).轻应用(webapp或者h5app)和混合应用(HibidAPP) 其中流应用和轻应用现在多基于浏览器开啊H5应用程序小程序是基于微信平台(软 ...
Android微信小程序原理,微信小程序事件流原理解析
这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一.什么是事件? 事件是视图层到逻辑层的通讯方式: 事件可 ...

微信小程序 —— 瀑布流简单写法（css3属性加wx：if判断轻松实现）

微信小程序 —— 瀑布流简单写法（css3属性加wx：if判断轻松实现）相关推荐

最新文章

热门文章