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怎么實現瀑布流布局”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！