在各个网页中，我们经常能看到很多大小不一的图片一个接一个的在屏幕中间滚动，就像下图这样。
其实可以看到，这里的文字和图片并不一定会对齐，而是像瀑布一样连续不断，多出现于电商或者视频网站等地方，这里我们说一下怎么实现。
第一种方法是通过columns 设置元素的列数，这样就能实现简单的瀑布流。需要注意的是需要添加break-inside: avoid;防止图片被分割。
第二种方法就是flex，flex是我们写页面中使用非常频繁的方法，三行代码就能实现多个块元素的垂直水平居中，并且还能根据宽度自动选择换行或者压缩。flex还和float浮动一样，能把块元素在一行显示，所以我们也可以用flex来实现瀑布流。大致思路就是我们手动选择需要有几列，把数据分到三个对象里，然后v-for循环三个对象，在使用flex弄到一行，就能实现简单的瀑布流。
然后，我们这可是vue，有很多优秀的插件包可以使用，这里推荐一下vue-waterfall-plugin。
首先使用npm install vue-waterfall-plugin安装依赖。
只需要引入组件，设置列表，插件会自动根据所给的块元素宽度设置列数。
了解更多js知识点击这里。
上一篇： js中如何使用php的数据
下一篇： 没有了
