微信小程序 瀑布流布局 终极解决方案

瀑布流布局 网上找了很多 发现都有bug 要不就很麻烦 自己手写了一个

使用的是flex 布局 最主要的属性就是

flex-wrap: warp    //超出自动换行

当你想使用3列排列是  子元素 宽度33%；多余的去第二行，

同理2列 50% 不过都要空出一点 否则有bug 所以给49%宽度就可以

 

上代码 目前是微信小程序  h5同理 就是标签改一改

//wxml   
<view class="image-list">
  <view class="imgage-box" wx:for="{{imageList}}"  wx:key="index">
    <image class="imgage-img" mode="aspectFill" src="{{item}}"></image>
  </view>
</view>


//css

.image-list {
  display: flex;
  flex-direction: row; 
  overflow: hidden;
  width: 96vw;
  margin-left: 2.5vw;
  margin-right: 0;
  flex-wrap: wrap;
}
.imgage-box {
   position: relative;
   margin-bottom: 8rpx;
   margin-right: 1vw;
   display: flex;
}
.imgage-box image {
  width: 31vw;
  height: 31vw;
}

因为flex其他属性起冲突 不用

 

做一次补充 新增加了一种动态排列方式 

思路： 按照要求分成两列 或三列甚至更多 不过移动端两列差不多了 ，获取数据时 增加图片的高度数据 

因为我前端也做了，也处理了

然后循环对比两列图片叠加的高度 进行填充  

大致就是两个空数组 获取图片高度 然后放在左边 下一个判断高度 可以用正则  反正机会数据循环 那边图片高度总和低就放哪边 

因为难度不大 （最重要懒得写） 就不写了 ，有需求的小伙伴 留言吧 应该很快回复  算了 还是复制一下吧 

算了 截图吧 简单快捷 就是代码需要手写喽 狗头