javascript - 如何像砖石风格一样在 pinterest 中显示引导卡？

<template> <div class="row mt-2 masonry-grid"> <div class="col-md-3"> <div class="card"> <h5 class="card-header"> Company Information </h5> <div class="card-body"> <dl class="row mt-2" v-if="profileResult"> <dt class="col-sm-5">Name:</dt> <dd class="col-sm-7">{{ profileResult.name }}</dd> <dt class="col-sm-5">Ticker:</dt> <dd class="col-sm-7">{{ profileResult.symbol }}</dd> <dt class="col-sm-5">Exchange:</dt> <dd class="col-sm-7">{{ profileResult.exchange }}</dd> <dt class="col-sm-5">Industry:</dt> <dd class="col-sm-7">{{ profileResult.industry }}</dd> <dt class="col-sm-5">Sector:</dt> <dd class="col-sm-7">{{ profileResult.sector }}</dd> <dt class="col-sm-5">Website:</dt> <dd class="col-sm-7">{{ profileResult.website }}</dd> </dl> </div> </div> </div> <div class="col-md-6"> <div class="card"> <h5 class="card-header"> Stock Chart {{ this.price ? '(' + this.price + ')' : '' }} </h5> <div class="card-body p-0"> <div id="container" ref="container" style="width: 100%; height: 100%;"> </div> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-header"> <h3 class="card-title">About Company</h3> </div> <div class="card-body"> <div class="row"> <div class="col-sm-12"> <div class="mb-1 text-center"> <img :src="logoResult.url" alt='logo' v-if="logoResult && logoResult.url"> </div> </div> <div class="col-sm-12"> <p v-if="profileResult && profileResult.description"> {{ profileResult.description.substring(0, 650).concat('...') }} </p> <p v-else> it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> </div> </div> </div> </div> </div> <div class="col-md-3"> <div class="card"> <h5 class="card-header"> Dividends </h5> <div class="card-body p-0"> <ul class="list-group"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> <li class="list-group-item">A fourth item</li> <li class="list-group-item">And a fifth one</li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-header"> <h3 class="card-title">Snowflake Analysis</h3> </div> <div class="card-body"> <p> Apple Inc. designs, manufactures, and markets smartphones, personal computers, tablets, wearables, and accessories worldwide. </p> <p>Rewards</p> <p>Earnings are forecast to grow 4.13% per year</p> <p>Earnings grew by 11.2% over the past year</p> </div> </div> </div> <div class="col-md-3"> <div class="card"> <h5 class="card-header"> Financial Health </h5> <div class="card-body p-0"> <ul class="list-group"> <li class="list-group-item">An item</li> <li class="list-group-item">A second item</li> <li class="list-group-item">A third item</li> <li class="list-group-item">A fourth item</li> <li class="list-group-item">And a fifth one</li> </ul> </div> </div> </div> <div class="col-md-8"> <div class="card"> <h5 class="card-header"> Actionarsstrukture </h5> <div class="card-body"> <template v-for="oneNews in news"> <a :href="oneNews.url" target="_blank" :key="oneNews.uuid"> <h6> {{ oneNews.title }} </h6> </a> <p :key="oneNews.uuid+'description'"> {{ oneNews.description }} </p> </template> <template v-if="!news.length"> <h3>No news found.</h3> </template> </div> </div> </div> <div class="col-md-4"> <div class="card"> <h5 class="card-header"> Future Growth </h5> <div class="card-body"> <p> Analyst Future Growth Forecasts </p> <p>Rewards</p> <p>Earnings are forecast to grow 4.13% per year</p> <p>Earnings grew by 11.2% over the past year</p> </div> </div> </div> </div> </template> <script> import darkTheme from '../../plugins/dark' import defaultTheme from "../../plugins/default"; export default { watch: { "$route": { handler: async function (to, from) { console.log('route watch', to, from); let { default: Masonry } = await import('masonry-layout'); let grid = new Masonry('.masonry-grid', { percentPosition: true, initLayout: false, }); }, deep: true, immediate: true } }, mounted() { if (process.client) { this.loadMasonryLayout(); } }, methods: { async loadMasonryLayout() { let { default: Masonry } = await import('masonry-layout'); let grid = new Masonry('.masonry-grid', { percentPosition: true, initLayout: false, }); } } };