上少下多的有序排列弹性布局

期望实现有序排列如下:

思路: 用到flex弹性布局(flex-direction:row-reverse; flex-wrap: wrap-reverse)+order属性(单个头像、序号、姓名在此看成一个元素模块先不管),

1. 如果用flex-direction: row; flex-wrap: wrap,不用order属性,排序出来是酱紫的:

2.如果用flex-direction:row;flex-wrap: wrap-reverse,不用order属性,排序出来是酱紫的:

3.如果用flex-direction:row-reverse;flex-wrap: wrap-reverse,不用order属性,排序出来是酱紫的

先贴wxss代码片段:

.prize3-flex {

  display: flex;

  flex-direction: row-reverse;

  flex-wrap: wrap-reverse;

  justify-content: space-around;

}

.prize3-box {
  margin: 0 30rpx 20rpx;
}

.prize3 {
  position: relative;
   150rpx;
  height: 190rpx;
  margin-bottom: 50rpx;
}

.avatar3-tag {
   40rpx;
  height: 40rpx;
  background: #d159f4;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  font-size: 28rpx;
  position: absolute;
  top: 10rpx;
  z-index: 1;
  left: 0;
}

.avatar3 {
   140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: red;
  position: absolute;
  top: 0;
  left: 10rpx;
}

.winner3 {
  font-size: 30rpx;
  text-align: center;
  150rpx;
  position: absolute;
  top: 160rpx;
}

再贴wxml片段:因数据为动态绑定,故将order赋值也是动态的。此方法同样适用于h5页

<view class="prize3-box prize3-flex">
    <view class="prize3" wx:if="{{item.rank !== 1 && (item.rank !== 2) && (item.rank !== 3)}}"
style="order: {{-item.rank}}; -webkit-order: {{-item.rank}}"  //为了辨识,我将其加粗,用-webkit-order是为了兼容ios8等较老版本机型
             wx:for="{{resultData.list}}" wx:key="{{item.rank}}">
      <view class="avatar3-tag">{{item.rank}}</view>
      <image src="{{item.headimgurl}}" class="avatar3"></image>
      <view class="winner3 font-color-fff">{{item.name}}</view>
    </view>
  </view>

PS: order属性 http://www.runoob.com/cssref/css3-pr-order.html

原文地址:https://www.cnblogs.com/ganmy/p/9379306.html