帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

响应式vue瀑布流布局组件(vue-masonry-wall)

帝国模板之家 2020-12-31 网页特效 评论

介绍

Vue.js响应式瀑布流布局系统。支持服务器端渲染和延迟加载。

使用方法

1. 导入vue-masonry-wall。

import VueMasonryWall from "vue-masonry-wall";

2. 将vue-masonry-wall组件添加到模板。

<template>
  <section>
    <vue-masonry-wall :items="items" :options="options" @append="append">
      <template v-slot:default="{item}">
        <div class="Item">
          <img :src="item.image"/>
          <div class="Content">
            <h5 class="text-ellipsis-1l">{{item.title}}</h5>
            <p class="text-ellipsis-2l">{{item.content}}</p>
          </div>
        </div>
      </template>
    </vue-masonry-wall>
  </section>
</template>

3. 在应用程序上渲染布局。

export default {
  name: "ExampleMasonry",
  components: {VueMasonryWall},
  data() {
    return {
      options: {
        width: 300,
        padding: {
          2: 8,
          default: 12
        },
      },
      items: [
        {
          title: 'Sed non ante non cras amet',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sagittis leo. Vestibulum sit amet metus nec neque dignissim dapibus.',
          image: 'https://picsum.photos/id/1015/600/600'
        },
        {
          title: 'Curabitur sit amet nunc',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mollis erat. Aliquam erat volutpat. Nunc erat lacus, rhoncus nec.',
          image: 'https://picsum.photos/id/1019/600/700'
        },
        {
          title: 'Proin pharetra, ante metus',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac diam ac ex efficitur posuere. Pellentesque cursus pellentesque risus, non.',
          image: 'https://picsum.photos/id/1039/600/800'
        },
        {
          title: 'Cras pharetra non enim a',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada varius nibh, a malesuada nisi feugiat eget. Aenean convallis semper.',
          image: 'https://picsum.photos/id/1042/600/300'
        },
      ]
    }
  },
  methods: {
    append() {
      // append method
    }
  }
}

4. 默认配置项。

/**
 * Array of items to add into masonry
 */
items: {
  type: Array,
  required: true
},
/**
 * Options to config masonry.
 *
 * {
 *     width: 300,
 *     padding: {
 *         default: 12,
 *         1: 6,
 *         2: 8,
 *     },
 *     throttle: 300
 * }
 */
options: {
  type: Object,
  required: false
},
/**
 * SSR has no clue what is the size of your height of your element or width of the browser.
 * You can however guess based on user-agent: https://github.com/nuxt-community/device-module
 * This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
 *
 * Once the client is mounted, it will redraw if the config is different from SSR.
 *
 * {
 *     column: 2
 * }
 */
ssr: {
  type: Object,
  required: false
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言