vue实现简单瀑布流布局

vue简单实现瀑布流布局的一种方式（vue瀑布流组件），供大家参考，具体内容如下

vue中的瀑布流布局组件

需求：图片容器宽度固定，高度根据图片自适应，图片一行不能排列时候，换行依次从左往右排列。（瀑布流概念）

另外结合vue-lazy实现懒加载 （ npm i vue-lazyload --save-dev）
使用也很简单，在需要懒加载的img标签上将:src换成v-lazy

父组件传递数据：

 waterfallData:[
  {
  e_img: "test.jpg",
  // 图片
  e_intro: "描述信息",
  u_img: "test.jpeg",
  // 标记图
  u_name: "开发者"},
 {
  e_img: "test.jpg",
  e_intro: "描述信息",
  u_img: "test.jpeg",
  u_name: "开发者"}
 ]

定宽不定高瀑布流布局子组件

如有问题，欢迎指正，如您有好的方案，敬请与我分享！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。