Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-bricks with all npm packages installed. Try it out:

var vueBricks = require("vue-bricks")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-bricks v2.0.0

vue-bricks

npm Travis Coveralls Github All Releases npm

bricks.js for vue 2.x waterfall component

中文文档

Thanks for

Install

> yarn add vue-bricks
# or
> npm i vue-bricks -S

Usage

global component

// main.js
import Vue from 'vue'
import 'vue-bricks/lib/vueBricks.css'
import VueBricks from 'vue-bricks'

Vue.use(VueBricks)

new Vue({
  render: h => h(App)
}).$mount('#app')

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'

It's set babel config to resolve, add sourceType: 'unambiguous':

// babel.config.js
module.exports = {
  presets: [
    '@vue/app'
  ],
  // here
  sourceType: 'unambiguous'
}

single component

<template>
  <div class="waterfall">
      <bricks
        ref="bricks"
        :data="waterfallData" 
        :sizes="waterfallSizes"
        :offset="100"
        @reach="fetchwaterfallData(true)"
        @update="done"
        @pack="done"
    >
        <template slot-scope="scope">
          <div class="card">
            <img class="card-img-top" :src="scope.item.src" :alt="scope.item.name" :style="{ width: `320px`, height: `${scope.item.height * 320 / scope.item.width}px` }">
            <div class="card-block">
              <h4 class="card-title" :style="scope.item.style">{{ scope.item.name }}</h4>
              <p class="card-text">{{ scope.item.width }} * {{ scope.item.height }}</p>
            </div>
          </div>
        </template>
      </bricks>
      <div class="loading" :class="{ active: loading }">
        <data-loader>Loading</data-loader>
      </div>
    </div>
</template>

<script>
import Bricks from 'vue-bricks'
// or
// import Bricks from 'vue-brick/src/components/bricks.vue'
import dataLoader from './components/loader'

export default {
  components: {
    Bricks,
    dataLoader
  },
  data () {
    return {
      loading: true,
      waterfallData: [],
      waterfallSizes: [
        { columns: 4, gutter: 20 },
        { mq: '414px', columns: 1, gutter: 10 },
        { mq: '640px', columns: 1, gutter: 80 },
        { mq: '800px', columns: 2, gutter: 80 },
        { mq: '1024px', columns: 3, gutter: 15 },
        { mq: '1280px', columns: 3, gutter: 30 },
        { mq: '1366px', columns: 4, gutter: 15 },
        { mq: '1440px', columns: 4, gutter: 30 },
        { mq: '1980px', columns: 5, gutter: 40 }
      ]
    }
  },
  methods: {
    async refresh () {
      document.documentElement.scrollTop = 0
      await this.fetchwaterfallData(true)
      this.$nextTick(() => this.$refs.bricks.pack())
      // or
      /*imageReady(imgList)
          .then(() => {
            this.$refs.bricks.pack()
          })
      */
    },
    fetchwaterfallData (isReset) {
      return new Promise(resolve => {
        this.loading = true
        fetc('/api/waterfall?search=girl')
          .then(data => {
            if (isReset) {
              this.waterfallData = data
            } else {
              this.waterfallData.push(...data)
            }
            resolve(data)
          })
      })
    },
    done () {
      this.loading = false
    }
  },
  created () {
    this.fetchwaterfallData(true)
  }
}
</script>

Props

NameDefaultDescription
dataundefinedArray, It's required
sizesundefinedArray, It's required, An array of objects describing the grid's properties at different breakpoints. reference
packeddata-packedString, An attribute added to the grid items after they're positioned within the grid. If the attribute is not prefixed with data-, it will be added.reference
positiontrueA boolean, defaulting to true, indicating that the grid items should be positioned using the top and left CSS properties. reference
containerwindowwrapper for bricks, the scroller
offset0when scroll to the page bottom near offset, It's trigger reach Event

API / Events

  • pack

    Used to pack all elements within the container.

      <bricks @pack="handlePack" />
    
  • update

    Used to pack elements without the packed attribute within the container.

      <bricks @update="handleUpdate" />
    
  • resize(size)

    Used to add or remove the resize event handler. It's recommended that you add the resize handler when you create your instance.

      <bricks @resize="handleResize" />
    

You can get bricks instance Object to resolve

this.$refs.bricks.update()
this.$refs.bricks.pack()
this.$refs.bricks.resize(false)

Project setup

yarn serve

MIT LICENSE (c) www.kuaizi.ai

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free