vue 实现的瀑布流 -- 基于flex

前言

已经npm发布了，有需要的伙伴可以直接  npm install sen-water-fall --save   快捷使用，备注：请尊重原创，转载记得说明，欢迎一起改进

主要目录为：

组件

1.components/waterfall/index.vue

主要采用多行多列思维

<template>
<div class="waterfall">
    <!-- 一个item为一个瀑布流布局 -->
    <div class="waterfall-Item" v-if="list && list.length" :style="'gap:'+ Hgap + 'px'">    
        <div class="waterfall-vertical-col" v-for="col in cols" :key="col" :style="'gap:'+ Vgap + 'px'">
            <div class="waterfall-vertical-row" v-for="row in rows" :key="row" :style="'background:' + bgColor">
             <!-- 超出范围为false不显示,范围内函数handled为当前的object值  -->
             <template v-if="handled(col,row)">          
                    <slot :nowItem="handled(col,row)" v-if="slotCard"></slot>
                    <div v-else class="tips"> 
                        我在第{{row}}行，第{{col}}列,<br/>
                        在数组list中排第{{(row - 1) * cols + col}}个数据 
                    </div>
             </template>            
            </div>
        </div>
    </div>
    <div v-else>
        暂无数据
    </div>
</div>      
</template>
<script>
export default {
    name:'water-fall',
    props: {
        list: {
         type:Array,
         default:()=>{
            return []
         }
        },
        cols:{   // 总列数
            type:Number,
            default:3
        },
        slotCard:{   // 是否开启插槽
            type: Boolean,
            default: false
        },
        Hgap:{    // 水平间距
            type:Number,
            default:10
        },
        Vgap:{    // 垂直间距
            type:Number,
            default:10
        },
        bgColor:{
            type:String,
            default: '#5189FB'
        }
    },
    data() {
        return {
    
        };
    },
    computed:{
      rows(){  // 总行数
        let wlength = this.list.length
        let num = 1
        if(wlength){
          num = Math.ceil(wlength/this.cols)
          return num 
        }
        return num
      },    
      handled(){   // 数据项
        return(col,row)=>{
          let item = true  
          let all = (row - 1) * this.cols + col   // 排在数组中第几个数据项
          if(all > this.list.length){
            console.log('区域块: '+ all + '超出数组长度: ' + this.list.length)
            item = false           // 默认
            // if(row == this.rows){  // 最后一行分情况显示
            //     let over = this.cols - col
            //     if(over > 0){
            //         item = this.list[all - 1]
            //     }
            // }
          }else{
            item = this.list[all - 1]
          }
          return item
        }
      }
    },
    watch: {

    },
    methods: {
      
    },
    created(){
        
    }
    };
</script>
<style scoped lang="scss">
    .waterfall{
       width: 100%;
      .waterfall-Item{
        display: flex;
        flex-flow: row;
        flex-wrap: nowrap;
        flex-direction: row;
        // gap:10px;  // 水平间距
        .waterfall-vertical-col{
            flex: 1;      
            display: flex;
            flex-flow: column;
            flex-direction: column;
            justify-content: flex-start; // 居上
            // gap:10px;   // 垂直间距  
            .waterfall-vertical-row{
                width: 100%;
                height: min-content;
                flex: none;
                // max-height: 200px; 
                // overflow: hidden;
                word-break: break-all;
                .tips{
                    padding-top: 20px;
                }
                .waterfall-content{  

                }
            }
        }
      }
    }
</style>

2.页面应用helloword

 <waterfall :slotCard="true" :list="list">
       <template slot-scope="scope">
          <div>{{scope.nowItem}}</div>
               
        </template>
 </waterfall>

list:[
          {id:1, text:' Flex是Flexible Box的缩写 flex布局表示弹性布局'},
          {id:2, text:'column-gap 属性用来设置多栏布局 multi-column 中元素列之间的间隔大小 ; 2、grid 布局中 gap 属性是用来设置网格行与列之间的间隙,该属性是 row-gap 和 column-gap 的简写形式,并且起初是叫 ..'},
          {id:3, text:' justify-content用于设置主轴上的子元素排列方式'},
          {id:4, text:'flex-wrap设置子元素是否换行默认情况下，子元素项目都排在同一条线轴上，flex布局中默认是不换行的。如果父级元素宽度不够装下总的子元素，则会缩小子元素的宽度，才能够放进父级元素内'},
          {id:5, text:'文字换行方法有: 1、按键盘回车键进行换行。 2、当一行书写完成时可自动换行,可一直点击空格键进行换行。 3、设置文字格式,指令为"井号加字母",编辑井号键加小写r为换行。'},
      ]

视觉效果：