Vue 3 砌体布局结合 bootstrap 5

Question

我一直在寻找 vue 3 框架下带有引导程序的砌体布局的解决方案，但没有运气。使用带有砌体CDN 的 bootstrap 5 卡挤压并重叠卡，但仍然没有呈现预期的布局。也许我错过了什么。非常感谢任何帮助。

编辑：

1. Here 是包含一些数据的代码沙箱。
2. HTML example 与 codeply。

这是我的代码的一部分：

<template>
  <div class="container">
    <div class="row justify-content-center" data-masonry='{"percentPosition": true }'>
      <div class="col-lg-3 col-md-4 col-sm-col" v-for="(newsPiece, index) in newsCollection" :key="index">
        <div class="card shadow-sm mt-3 mx-1">
        <img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
          :data-bs-target="'#collapseImage'+index">
        <h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
        <div class="collapse" :id="'collapseImage'+index">
          <div class="card-body-noborder">
            <span v-html="newsPiece.description"></span>
          </div>
        </div>
        <div class="card-footer">
          {{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card {
  width: 13rem; 
  border-radius:10px;
}
.row {
  padding: 0 15%;
}
h5 {
  font-size: 1rem;
}
.card-footer {
  font-size: 1rem;
}

@media screen and (max-width:600px) {
  .card {
    width: 20rem;
    border-radius:10px;
  }
  h5 {
    font-size: 1.2rem;
  }
}
</style>

Answer 1

要将 Masonry 与 Vue 结合使用，您需要...

1. 将其安装为依赖项...

npm install masonry-layout

1. 导入它...

import Masonry from "masonry-layout"

1. 最后，在你的 Vue 组件中初始化它...

...
  mounted() {
    // initialize masonry
    var row = document.querySelector("[data-masonry]");
    new Masonry(row, {
      // options
      percentPosition: true,
    });
  },
...

CodeSandbox