1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<template>
<div ref="waterfall" class="waterfall">
<WaterfallItem
v-for="item in items"
:key="item.id"
:style="{ width: `${itemWidth}px`, marginBottom: `${gutterHeight}px` }"
:width="itemWidth">
<slot :item="item" />
</WaterfallItem>
</div>
</template>
<script>
import WaterfallItem from './WaterfallItem.vue';
const isBrowser = typeof window !== 'undefined';
// eslint-disable-next-line global-require
const Masonry = isBrowser ? window.Masonry || require('masonry-layout') : null;
const imagesloaded = isBrowser ? require('imagesloaded') : null;
export default {
name: 'Waterfall',
components: {
WaterfallItem
},
props: {
options: {
'type': Object,
'default': () => {}
},
items: {
'type': Array,
'default': () => []
},
itemWidth: {
'type': Number,
'default': 150
},
gutterWidth: {
'type': Number,
'default': 10
},
gutterHeight: {
'type': Number,
'default': 4
}
},
mounted() {
this.initializeMasonry();
this.imagesLoaded();
},
updated() {
this.performLayout();
this.imagesLoaded();
},
unmounted() {
this.masonry.destroy();
},
methods: {
imagesLoaded() {
const node = this.$refs.waterfall;
imagesloaded(
node,
() => {
this.masonry.layout();
}
);
},
performLayout() {
const diff = this.diffDomChildren();
if (diff.removed.length > 0) {
this.masonry.remove(diff.removed);
this.masonry.reloadItems();
}
if (diff.appended.length > 0) {
this.masonry.appended(diff.appended);
this.masonry.reloadItems();
}
if (diff.prepended.length > 0) {
this.masonry.prepended(diff.prepended);
}
if (diff.moved.length > 0) {
this.masonry.reloadItems();
}
this.masonry.layout();
},
diffDomChildren() {
const oldChildren = this.domChildren.filter(element => Boolean(element.parentNode));
const newChildren = this.getNewDomChildren();
const removed = oldChildren.filter(oldChild => !newChildren.includes(oldChild));
const domDiff = newChildren.filter(newChild => !oldChildren.includes(newChild));
const prepended = domDiff.filter((newChild, index) => newChildren[index] === newChild);
const appended = domDiff.filter(el => !prepended.includes(el));
let moved = [];
if (removed.length === 0) {
moved = oldChildren.filter((child, index) => index !== newChildren.indexOf(child));
}
this.domChildren = newChildren;
return {
'old': oldChildren,
'new': newChildren,
removed,
appended,
prepended,
moved
};
},
initializeMasonry() {
if (!this.masonry) {
this.masonry = new Masonry(
this.$refs.waterfall,
{
columnWidth: this.itemWidth,
gutter: this.gutterWidth,
...this.options
}
);
this.domChildren = this.getNewDomChildren();
}
},
getNewDomChildren() {
const node = this.$refs.waterfall;
const children = this.options && this.options.itemSelector
? node.querySelectorAll(this.options.itemSelector)
: node.children;
return Array.prototype.slice.call(children);
}
}
};
</script>
|