当前位置:首页 >> 网络编程

vue实现简单瀑布流布局

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

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

<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实战教程》

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