Site

1 files changed, 60 insertions, 0 deletions

diff --git a/src/site/components/grid/waterfall/WaterfallItem.vue b/src/site/components/grid/waterfall/WaterfallItem.vue
new file mode 100644
index 0000000..597cca6
--- /dev/null
+++ b/src/site/components/grid/waterfall/WaterfallItem.vue
@@ -0,0 +1,60 @@
+<style>
+	.waterfall-item {
+		position: absolute;
+	}
+</style>
+<template>
+	<div class="waterfall-item">
+		<slot/>
+	</div>
+</template>
+<script>
+import imagesLoaded from 'imagesloaded';
+export default {
+	name: 'WaterfallItem',
+	props: {
+		order: {
+			type: Number,
+			default: 0
+		},
+		width: {
+			type: Number,
+			default: 150
+		}
+	},
+	data() {
+		return {
+			itemWidth: 0,
+			height: 0
+		};
+	},
+	created() {
+		this.$watch(() => this.height, this.emit);
+	},
+	mounted() {
+		this.$el.style.display = 'none';
+		this.$el.style.width = `${this.width}px`;
+		this.emit();
+		imagesLoaded(this.$el, () => {
+			this.$el.style.left = '-9999px';
+			this.$el.style.top = '-9999px';
+			this.$el.style.display = 'block';
+			this.height = this.$el.offsetHeight;
+			this.itemWidth = this.$el.offsetWidth;
+		});
+	},
+	methods: {
+		emit() {
+			this.$parent.$emit('itemRender');
+		},
+		getMeta() {
+			return {
+				el: this.$el,
+				height: this.height,
+				width: this.itemWidth,
+				order: this.order
+			};
+		}
+	}
+}
+</script>