vue-waterfall-eric

A waterfall layout component for Vue.js

Installation

npm install --save vue-waterfall-eric

Import

/* in main.js */
import Vue from "vue";
import Waterfall from 'vue-waterfall-eric'
import "animate.css"

Vue.use(Waterfall);

/* in xxx.vue */
<eric-waterfall :list="list" :column="2" :gap="2.6667" :height-extend-scale="44 / 164" :max-item-scale="2" animate="fadeInUp">
  <template scope="props">
    <eric-waterfall-slot :config="props.config">
      <div class="list-item">
        <div>
          <p>Picture{{ props.item.id }}</p>
        </div>
      </div>
      <div class="item-bottom" slot="bottom">
        <span>Extended area</span>
      </div>
    </eric-waterfall-slot>
  </template>
</eric-waterfall>

Browser

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="../lib/vue-waterfall-eric.min.js"></script>

new Vue({
  ...
  components: {
    ericWaterfall: waterfall.ericWaterfall
    ericWaterfallSlot: waterfall.ericWaterfallSlot
  },
  ...
})

Props

ericWaterfall

ericWaterfallSlot

props.item Inherited from the list item,has all the attributes of the list item