网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
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
}
转载请注明来源:响应式vue瀑布流布局组件(vue-masonry-wall)
本文永久链接地址:https://www.moyouyouw.cn/code/1152.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论