微信小程序循环布局《源码复制即》

wxml：
 <view class='dorders'>  
     <block wx:for='{{dorder_list}}' wx:key='item' id='index' class='borderjiaoyu'>
      <view class='dorder'>  
           <view style='position:relative'>  
                  <image src='{{item.dorderimg}}' class='cover' data-item_data='{{item}}' id='vid' bindtap='ontTapk12details'> </image>      
                     <view class='bg'>     
                           <view class='text'>{{item.text}}</view>     
                     </view>     
                  </view>
             </view>
        </block> 
    </view>

 

改变图片和循环dorder 的宽可以改变循环的列
css：
.cover {
 width:245rpx;
  height: 298rpx;
   z-index: -1
   }
.dorder { 
width:245rpx;
  height: 298rpx;
    padding: 4rpx;
    }
.dorders {
  width: 100%;
    margin-top: 20rpx;
      display: flex;
       flex-wrap: wrap;
       }
.text {  
word-break: break-all;
 text-overflow: ellipsis;
 display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/ 

  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
 -webkit-line-clamp: 1; /** 显示的行数 **/ 
 overflow: hidden;  /** 隐藏超出的内容 **/
font-size: 30rpx;
text-align: center;
 color: #fff;}
 .bg{
  position: absolute;
    width:100%;
     height: 50rpx;
      background-color: rgba(0, 0, 0, 0.5);
       bottom: 10rpx;
        text-align: center; 
        line-height: 50rpx;
        }
    .top {
  width: 668rpx;
  height: 80rpx; 
  background: #e2e2e2;
   display: flex;
   flex-direction: row;
   margin-left: 40rpx;
   }
.topborder { 
width: 226rpx;
 height: 80rpx;
line-height: 80rpx;
border: 1rpx solid rgb(219, 218, 218);}
.toptex {  margin-left: 50rpx;
}
._ {
 width: 100%;
  height: 10rpx;
    background: #f2f2f2 100%; 
    margin-top: 50rpx;
    }
.buttontop {
 background: rgb(187, 3, 3); 
 color: #fff;
 }.
 moremore{
  margin-left: 40rpx;
  }

js：
  data: {dorder_list: [{  
      text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',
         }, { 
      text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',  
       }, {   
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',  
       }, {  
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',
         }, {  
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',
         }, {   
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',  
       }, {   
      text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',  
       }, {
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',
         }, {  
    text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png', 
        }, {  
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',
    }, {  
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png', 
        }, {   
        text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png',  
       }, {    
       text: '艾凡企业-企业危机管理',
      dorderimg: '/img/1.png', 
        },
    ],  },