waterfall-瀑布流元件

基於Vue.js的瀑布流元件

GitHub地址: https://github.com/watson-yan/waterfall

Demo地址: https://huayan.site/waterfall

瀑布流佈局的優點

瀑布流對於圖片的展現，是高效而具有吸引力的，使用者一眼掃過的快速閱讀模式可以在短時間內獲得更多的資訊量,而瀑布流裡懶載入模式又避免了使用者滑鼠點選的翻頁操作，瀑布流的主要特性便是錯落有致，定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片佈局模式，巧妙的利用視覺層級，視線的任意流動又緩解了視覺疲勞，同時給人以不拘一格的感覺，切中年輕一族的個性化心理。國內類Pinterest網站也如雨後春筍般出現，已知網站超40家，類Pinterest網站有四種，一是電商導購，如想去網、蘑菇街和美麗說、好享說、依託於淘寶平臺;二是興趣圖譜分享，如知美、花瓣等;三是在細分垂直領域，如針對吃貨的零食控、針對家居行業的他部落等。四是服裝款式設計資訊平臺如看潮網等等。

瀑布流的分類：豎向瀑布流 和 橫向瀑布流

• 豎向瀑布流

圖片列表分為固定列，每個圖片或者容器的寬度相同，高度與寬度等比縮放(所以不同的比例圖片高度不一樣)，如下圖所示：

• 橫向瀑布流：

圖片或者容器保持高度相同，每一行的顯示的圖片寬度之和等於頁面的寬度，高度與寬度等比縮放(所以不同的比例圖片寬度不一樣)，但由於寬度不一定能滿足剛好佔滿一行，所以採取了切割圖片的做法， 如下圖所示：

How to use

作為瀑布流的一個嘗試，並沒有打包釋出，元件的原始碼在 ./src/components/Waterfall.vue中, 該�例子只是作為一個demo，具體可以根據使用場景在此基礎上做修改。

說明

此示例中需要後端傳回的資料包含圖片的尺寸資料，如果完全靠前端來計算圖片的寬和高，對網路和效能開銷比較大，我們專案的實際也是採用了後端傳回圖片的寬高來計算出在瀑布流中顯示的比例，保持圖片不變形。

Props

prop	type	description
list	Array	圖片列表
row	Boolean	是否橫向排列
column	Number	�如果不是橫向排列,column代表分為幾列（預設4列）
height	Number	如果是橫向排列, height為沒行應該佔得高度（預設225px）

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.