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

前言

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

主要目录为：

组件

1.components/waterfall/index.vue

主要采用多行多列思维

2.页面应用helloword

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为换行。'},
      ]

视觉效果：