Bootstrap - Masonry

概覽

• Masonry 是一個 JavaScript 第三方庫，用於在網頁上建立動態網格佈局。

• 它通常用於排列元素，通常是影像或其他媒體。

• 媒體以響應式網格佈局排列，其中每個元素透過將它們緊密排列在一起來填充可用的垂直空間。

• 佈局看起來像磚砌牆。

Bootstrap 可以與 masonry 整合。Masonry 可以與 Bootstrap 網格系統和卡片元件一起使用。

由於 masonry 不包含在 Bootstrap 中，因此您需要透過手動包含 JavaScript 外掛或使用 CDN（例如）來新增它。

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" crossorigin="anonymous" async></script>

您可以透過將 **data-masonry='{"percentPosition": true }'** 新增到 **.row** 包裝器中，來結合 Bootstrap 的響應式網格和 Masonry 的定位優勢。

下面給出的連結顯示了 masonry 和 bootstrap 整合的示例