瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局

写页面时，考虑到美观，良好的用户体验，对于内容的展示我们经常会用到瀑布流式布局，那么如何实现一个简单的瀑布流呢？

瀑布流式布局

原理：遍历数组判断奇偶性，然后分左右排布，左右两边代码基本一致

直接上代码：

index.wxml

  //index.wxml

  
    
      
 
        

 
            

          
            

              
                
              


              
              

              {{item.activityname}}
              
                
                  
                  {{item.nickname}}
                
                
                  
                  
                
              
            
          
          



            

          
            

              
                
              

              
              
              {{item.activityname}}
              
                
                  
                  {{item.nickname}}
                
                
                  
                  
                
              
            
          
          
        
      

index.wxss

//index.wxss

/* 推荐&精选 */

.activity_recommend{
  margin-top:10px;
  padding-top:5px;
  margin-left: 25rpx;
  margin-right:25rpx;
  position: relative;
}

.recommend_content{
  clear:both;
  overflow: hidden;
  width:100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.recommend_content:after {
  content: "";
  width: 336rpx;
  }
  
.recommend_item{
  display: inline-block;
  background:#fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  width:336rpx;
  min-height: 390rpx;
  max-height: 590rpx;
  position: relative;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.10); //阴影效果
}

.item-img_container{
  width:336rpx ;
  border-radius: 12rpx 12rpx 0 0 ;
}


.item-img_container .item-img{
  width:336rpx;
  min-height: 190rpx;
  max-height: 380rpx;
  border-radius: 12rpx 12rpx 0 0 ;
}
.item-img_video{
  width:336rpx;
  min-height: 190rpx;
  max-height: 380rpx;
  border-radius: 12rpx 12rpx 0 0 ;
}

index.js(可忽略）

 //index.js

 // 获取formId
  submitInfo(e) {
    this.setData({
        formId: e.detail.formId,
      },
      (res) => {})
  },
//获取点击项的formId以此查询数据对其操作

也引用将上述代码，写入组件使用，可参考

ajing741472797/pbl​github.com

end