今天我們要來介紹一個基于Vue的瀑布流demo。瀑布流是一種展示內容的布局方式，其特點是每個元素位置不規則，但整體呈現出類似瀑布般的效果，比較適合展示圖片、文章等。

首先，我們需要安裝Vue和Masonry，Masonry是一個jQuery插件，但我們可以通過npm安裝其Vue版本。

npm install vue vue-masonry --save

接下來，我們創建一個Vue實例，并在其template中引入Masonry組件。在data中定義要展示的數據，以及Masonry的選項。這里的選項包括列寬、容器組件、事件監聽等。

var app = new Vue({
el: '#app',
data: {
items: [{
src: 'https://picsum.photos/id/237/200/300'
}, {
src: 'https://picsum.photos/id/238/200/300'
},
...
],
masonryOptions: {
columnWidth: 200,
itemSelector: '.grid-item',
percentPosition: true,
gutter: 10
}
},
components: {
'masonry': VueMasonry.Masonry,
'masonry-item': VueMasonry.MasonryItem
}
})

在template中，我們可以使用v-for循環展示每個item，并使用v-bind將其綁定到Masonry組件上，以實現瀑布流的效果。

<masonry :options="masonryOptions">
<masonry-item v-for="item in items" class="grid-item">
<img :src="item.src">
</masonry-item>
</masonry>

最后，我們需要在CSS中對展示的圖片進行樣式設置，以便呈現瀑布流的效果。

.grid-item {
width: 200px;
margin-bottom: 10px;
}

到這里，一個簡單的Vue瀑布流demo就完成了。我們可以通過修改data中的items數據，以及Masonry的選項，來實現不同的展示效果。