vue实现简单瀑布流布局

(编辑：jimmy 日期: 2024/11/26 浏览：3 次 )

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: "开发者"}
 ]

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

<template>
<div>
 <div class="waterfall px-container clearfix" v-cloak>
 <ul class="px-waterfall left" v-for="(el,i) in newWaterfallData" :key="i">
 <li v-for="(item,index) in el" :key="index">
 <div style="position: relative;" >
  <router-link to="/goodsdetail/1">
   <img v-lazy="item.e_img" class="bg-img" alt="" v-loading="true">
  </router-link>
  <div class="px-hot-tag" v-if="item.u_img">
   <img :src="/UploadFiles/2021-04-02/item.u_img">

如有问题，欢迎指正，如您有好的方案，敬请与我分享！
更多文章可以点击《Vue.js前端组件学习教程》学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：JS如何在数组指定位置插入元素
下一篇：JavaScript观察者模式原理与用法实例详解