关于uniapp的图片瀑布流

原创

已于 2023-05-11 13:20:09 修改 · 947 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #css3 #html5

于 2023-05-11 13:09:04 首次发布

# 前言
看到很多关于瀑布流写法问题，有flex布局，column布局，等等方面，但是自己使用起来有一些问题，所以现在自己写一个关于瀑布流的文章，新手写法，写的不好勿喷，先介绍一下flex和column写法
### flex布局原理
先来一个包住整个瀑布流的盒子，如果是2列，给该盒子设置display：flex;flex-wrap：wrap;完成这一步我们就可以有一个flex布局，超出该盒子宽度自动换行，然后在这个大盒子内部设置2个div容器，一列取奇数，一列取偶数进行实现


<view class="box"  style=‘’>   
     <view  v-for="(item,idx) in  dataList"  :key="idx">
          <view v-if="idx%2==1">  {
  
  {item.img}} </view>
     </view>
       <view  v-for="(item,idx) in  dataList"  :key="idx">
          <view v-if="idx%2！=1"> {
  
  {item.img}} </view>
     </view>
</view>

但是这样有个弊端，排列的顺序是按照奇数偶数来控制的，可能跟自己的有偏差，我们采用column布局也是一样的道理无法控制排列顺序，column布局百度有很多，这里就不写了，而我们一般的瀑布流是多列情况哪一列最短，那么下一个元素补位在最短那一列，
这是用column的排列布局