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'
},
]