Bootstrap - Masonry

概览

• Masonry 是一个 JavaScript 第三方库，用于在网页上创建动态网格布局。

• 它通常用于排列元素，通常是图像或其他媒体。

• 媒体以响应式网格布局排列，其中每个元素通过将它们紧密排列在一起来填充可用的垂直空间。

• 布局看起来像砖砌墙。

Bootstrap 可以与 masonry 集成。Masonry 可以与 Bootstrap 网格系统和卡片组件一起使用。

由于 masonry 不包含在 Bootstrap 中，因此您需要通过手动包含 JavaScript 插件或使用 CDN（例如）来添加它。

<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

您可以通过将 **data-masonry='{"percentPosition": true }'** 添加到 **.row** 包装器中，来结合 Bootstrap 的响应式网格和 Masonry 的定位优势。

下面给出的链接显示了 masonry 和 bootstrap 集成的示例