微信小程序 —— 瀑布流简单写法（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'
      },

    ]