vue简单实现瀑布流布局的一种方式(vue瀑布流组件)

vue中的瀑布流布局组件
需求:图片容器宽度固定,高度根据图片自适应,图片一行不能排列时候,换行依次从左往右排列。(瀑布流概念)
vue简单实现瀑布流布局的一种方式(vue瀑布流组件)_第1张图片

另外结合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: "开发者"}
   ]

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




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

你可能感兴趣的:(vue)