vue怎么实现瀑布流布局

这篇“vue怎么实现瀑布流布局”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“vue怎么实现瀑布流布局”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

　　vue中的瀑布流布局组件需求：图片容器宽度固定，高度根据图片自适应，图片一行不能排列时候，换行依次从左往右排列。另外结合vue-lazy实现懒加载（npmivue-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>
　　<divclass="waterfallpx-containerclearfix"v-cloak>
　　  <ulclass="px-waterfallleft"v-for="(el,i)innewWaterfallData":key="i">
　　   <liv-for="(item,index)inel":key="index">
　　    <div>
　　 <router-linkto="/goodsdetail/1">
　　 <imgv-lazy="item.e_img"class="bg-img"alt=""v-loading="true">
　　 </router-link>
　　 <divclass="px-hot-tag"v-if="item.u_img">
　　 <img:src="item.u_img"alt="">
　　 </div>
　　    <h4class="font22color-ffffh"v-if="item.e_intro">{{item.e_intro}}</h4>
　　  </div>
　　   </li>
　　  </ul>
　　 </div>

以上是“vue怎么实现瀑布流布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！