保姆级使用vue-masonry

安装

// 安装
npm install vue-masonry -S

全局引入

import { VueMasonryPlugin } from 'vue-masonry';

app.use(VueMasonryPlugin);

基本使用

<template>
  <div>
    <div v-masonry transition-duration="0.3s" i tem-selector=".item">
      <div v-masonry-tile class="item" v-for="item in blocks" :key="item.id">
        <!-- 你要渲染的图片啦，文字一类的代码块 -->
        <img :src="item.url" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      blocks:[

        {
          id: 0,
          url:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=2&spn=0&di=7264239678495129601&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2991871983%2C3516057309&os=1481407957%2C3095772838&simid=2343364%2C681212261&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftp08%2F24041224115258-lp.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FprAzdH3Fd98bn0_z%26e3Bip4s&gsm=&islist=&querylist=&dyTabStr=MCwxLDMsMiw2LDQsNSw4LDcsOQ%3D%3D'
        },
        {
          id: 1,
          url:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=9&spn=0&di=7264239678495129601&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=1871498899%2C3092577328&os=2828598417%2C118975249&simid=3425668666%2C209403508&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftp10%2F2109261124125L4-0-lp.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FprAzdH3Fn0mldl_z%26e3Bip4s&gsm=&islist=&querylist=&dyTabStr=MCwxLDMsMiw2LDQsNSw4LDcsOQ%3D%3D'
        },
        {
          id: 2,
          url:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=11&spn=0&di=7264239678495129601&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=320673123%2C3023236210&os=1635535919%2C2325598994&simid=320673123%2C3023236210&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=https%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F112420100439%2F201124100439-1-1200.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FkzAzdH3FiizoAzdH3FxipxAzdH3Fd0mbn8_z%26e3Bip4s&gsm=&islist=&querylist=&dyTabStr=MCwxLDMsMiw2LDQsNSw4LDcsOQ%3D%3D'
        },
        {
          id: 3,
          url:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=13&spn=0&di=7264239678495129601&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2759886675%2C3050232684&os=4175619537%2C842558139&simid=4088852704%2C463939892&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fc%2F5799c819cd9ae.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Botg9aaa_z%26e3Bv54AzdH3Fowssrwrj6_kt2_8alm89_c_z%26e3Bip4s&gsm=&islist=&querylist=&dyTabStr=MCwxLDMsMiw2LDQsNSw4LDcsOQ%3D%3D'
        },
        {
          id: 4,
          url:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&hs=0&pn=16&spn=0&di=7264239678495129601&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3751323783%2C2455338433&os=311332440%2C2646641325&simid=4179380928%2C555707457&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-12-03%2F5c04fcc77ab68.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Botg9aaa_z%26e3Bv54AzdH3Fowssrwrj6_kt2_8cn80n_z%26e3Bip4s&gsm=&islist=&querylist=&dyTabStr=MCwxLDMsMiw2LDQsNSw4LDcsOQ%3D%3D'
        }
      ]
    }
  }
}
</script>

属性

item-selector=“.item”- 列表元素 DOM 项目选择器；
transition-duration="0.3s- 过渡的持续时间；
column-width=“#test”- 列宽的元素选择器。可以是选择器字符串或数字；
origin-left=“false”- 设置为默认将元素分组到右侧而不是左侧；
origin-top=“false”- 默认情况下将元素分组到底部而不是顶部；
stamp=“.stamp”- 指定在布局中标记哪些元素；
gutter=“.gutter-block-selector”- 指定[项目元素之间的水平空间]。可以是选择器字符串或数字。
将 gutter 设置为 Element 或 Selector String 以使用元素的外部宽度；
fit-width=“true”- 设置容器的宽度以适合可用的列数；
horizontal-order=“true”- 布置项目以（主要）保持水平从左到右的顺序；
stagger=“0.03s”- 错开项目过渡，因此项目一个接一个地逐步过渡。设置为 CSS
时间格式，“0.03s”，或以毫秒为单位的数字，30。
destroy-delay="0"masonry.destroy()-当容器被销毁时，在卸载砖石之前等待的时间（以毫秒为单位） 。这在页面/路由转换期间很有用，以确保在转换发生时布局是一致的。