🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A Vue.js 2+ component for rendering a responsive, cross-platform, Pinterest-like layout in the web application.

Layout

Documentation

v-waterfall

A waterfall layout component for Vue.js(^2.0)

Demo

simple demo

Installation

npm install --save v-waterfall

use

/* in xxx.vue */ <template>     <div>         /*core code*/         <Waterfall v-for="(item,index) in items"                    :maxWidth='240'                    :gapWidth='20'                    :gapHeight='20'                    :resize="true"                    :height='Math.random() * 200 + 200'                    :item="item"                    :index="index"                    :moduleStyle="$style"                    uniqueId="xyx"                    inline-template>             <div :class="moduleStyle.item" :style="style">                 {{index}}             </div>         </Waterfall>         </*core code*/>     </div> </template> <script> import Waterfall from 'v-waterfall'  export default {   ...   components: {     Waterfall,   }   ... } </script>

##Api


You May Also Like