微信小程序实现展示图片（图片推广小程序可以使用）

实现效果图：

首先就是这个封面是一些图片展示界面，后台返回的都是图片。然后根据返回数据数组的下标进行分类，第一排只显示数组为1，4，7一次类推，第二列是2，5，8的index，第三列是3，6，9等等，根据下标进行分类然后排版。没一列都网上堆叠即可。

上代码：wxml

---

<view class='top' style="opacity:{{maskshow?'0.8':'none'}}">
    <view wx:if="{{showdapei==1}}" class='top' style="opacity:{{maskshow?'0.8':'none'}}">
      <view class='content_list'>
        <view class='item_pic'>
          <view wx:for="{{image_url}}" wx:key="item" style='width:100%;' bindtap='playvideobtn'>
            <view style=' margin 2rpx;padding-left:01rpx; position:relative;'>
              <image wx:if="{{image_url[index].selected&&(index+1)%3==1}}" data-index="{{index}}" src='http://cdzhongdan.oss-cn-shenzhen.aliyuncs.com/yinuo/%E5%AF%B9%E5%8B%BE%E9%80%89%E4%B8%AD.png' bindtap='duigou' style='position:absolute;width:50rpx;height:50rpx;margin:60% 45%;'></image>
              <image wx:if="{{(index+1)%3==1}}" style="width:98% ;" src='{{item.poster}}' lazy-load data-pic_url='{{item}}' data-index="{{index}}" bindtap="playvideo" class='image_style' mode='widthFix'></image>
            </view>
          </view>
        </view>

        <view class='item_pic'>
          <view wx:for="{{image_url}}" wx:key="item" style='width:100%;' bindtap='playvideobtn'>
            <view style=' margin 2rpx;padding-right:0rpx; position:relative;'>
              <image wx:if="{{image_url[index].selected&&(index+1)%3==2}}" data-index="{{index}}" src='http://cdzhongdan.oss-cn-shenzhen.aliyuncs.com/yinuo/%E5%AF%B9%E5%8B%BE%E9%80%89%E4%B8%AD.png' bindtap='duigou' style='position:absolute;width:50rpx;height:50rpx;margin:60% 45%;'></image>
              <image wx:if="{{(index+1)%3==2}}" style="width:98%;height:{{index==1?'320rpx':''}} ;" src='{{item.poster}}' lazy-load data-pic_url='{{item}}' data-index="{{index}}" bindtap="playvideo" class='image_style {{index==1?"":""}}' mode='{{index==1?"":"widthFix"}}'></image>
            </view>
          </view>
        </view>

        <view class='item_pic'>
          <view wx:for="{{image_url}}" wx:key="item" style='width:100%;' bindtap='playvideobtn'>
            <view style=' margin 2rpx; position:relative;'>
              <image wx:if="{{image_url[index].selected&&(index+1)%3==0}}" data-index="{{index}}" src='http://cdzhongdan.oss-cn-shenzhen.aliyuncs.com/yinuo/%E5%AF%B9%E5%8B%BE%E9%80%89%E4%B8%AD.png' bindtap='duigou' style='position:absolute;width:50rpx;height:50rpx;margin:60% 45%;'></image>
              <image wx:if="{{(index+1)%3==0}}" src='{{item.poster}}' style="width: 98%;height:{{index==2?'370rpx':''}};" data-pic_url='{{item}}' data-index="{{index}}" bindtap="playvideo" class="image_style " mode='{{index==2?"":"widthFix"}}'></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

WXSS：

.content_list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  margin-left:5rpx;
  /* border: 1px solid #f0f0f0; */
}

.item_pic {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  flex-wrap: wrap;
}
.top{
  width: 100%;height:auto;
  background-color: white;
  z-index: 1;
}

顺便分享一波个人公众号,关注关注我呗，分享一些你们需要的资源，大家一起进步。

会分享一些视频资源的哦