waterfall-瀑布流組件
基于Vue.js的瀑布流組件
GitHub地址: https://github.com/watson-yan/waterfall
Demo地址: https://huayan.site/waterfall
瀑布流布局的優(yōu)點(diǎn)
瀑布流對(duì)于圖片的展現(xiàn)瘸彤，是高效而具有吸引力的埠通，用戶(hù)一眼掃過(guò)的快速閱讀模式可以在短時(shí)間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶(hù)鼠標(biāo)點(diǎn)擊的翻頁(yè)操作替废，瀑布流的主要特性便是錯(cuò)落有致，定寬而不定高的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺(jué)層級(jí)剃根，視線(xiàn)的任意流動(dòng)又緩解了視覺(jué)疲勞菲宴，同時(shí)給人以不拘一格的感覺(jué)，切中年輕一族的個(gè)性化心理度秘。國(guó)內(nèi)類(lèi)Pinterest網(wǎng)站也如雨后春筍般出現(xiàn)顶伞，已知網(wǎng)站超40家，類(lèi)Pinterest網(wǎng)站有四種剑梳，一是電商導(dǎo)購(gòu)唆貌，如想去網(wǎng)、蘑菇街和美麗說(shuō)垢乙、好享說(shuō)锨咙、依托于淘寶平臺(tái);二是興趣圖譜分享，如知美追逮、花瓣等;三是在細(xì)分垂直領(lǐng)域酪刀，如針對(duì)吃貨的零食控、針對(duì)家居行業(yè)的他部落等钮孵。四是服裝款式設(shè)計(jì)資訊平臺(tái)如看潮網(wǎng)等等骂倘。
瀑布流的分類(lèi)：豎向瀑布流 和 橫向瀑布流
-
豎向瀑布流
圖片列表分為固定列，每個(gè)圖片或者容器的寬度相同巴席，高度與寬度等比縮放(所以不同的比例圖片高度不一樣)历涝，如下圖所示：
-
橫向瀑布流：
圖片或者容器保持高度相同，每一行的顯示的圖片寬度之和等于頁(yè)面的寬度情妖，高度與寬度等比縮放(所以不同的比例圖片寬度不一樣)睬关，但由于寬度不一定能滿(mǎn)足剛好占滿(mǎn)一行，所以采取了切割圖片的做法毡证， 如下圖所示：
How to use
作為瀑布流的一個(gè)嘗試电爹，并沒(méi)有打包發(fā)布，組件的源碼在 ./src/components/Waterfall.vue中, 該?例子只是作為一個(gè)demo料睛，具體可以根據(jù)使用場(chǎng)景在此基礎(chǔ)上做修改丐箩。
說(shuō)明
此示例中需要后端傳回的數(shù)據(jù)包含圖片的尺寸數(shù)據(jù)，如果完全靠前端來(lái)計(jì)算圖片的寬和高恤煞，對(duì)網(wǎng)絡(luò)和性能開(kāi)銷(xiāo)比較大屎勘，我們項(xiàng)目的實(shí)際也是采用了后端傳回圖片的寬高來(lái)計(jì)算出在瀑布流中顯示的比例，保持圖片不變形居扒。
Props
| prop | type | description |
|---|---|---|
| list | Array | 圖片列表 |
| row | Boolean | 是否橫向排列 |
| column | Number | ?如果不是橫向排列,column代表分為幾列（默認(rèn)4列） |
| height | Number | 如果是橫向排列, height為沒(méi)行應(yīng)該占得高度（默認(rèn)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.
