Bootstrap - Masonry Demo

Bootstrap Masonry 简介

你好，有抱负的网页开发者们！今天，我们将进入Bootstrap Masonry的精彩世界。作为你友好的计算机老师邻居，我很高兴引导你们开始这段旅程。即使你之前从未写过一行代码，也不用担心——我们会一步步来，很快你就能像一个专业人士一样创建出美丽、动态的布局！

Bootstrap-Masonry Demo

什么是 Bootstrap Masonry？

Bootstrap Masonry 是一种强大的布局技术，允许你创建具有不同高度的元素网格。想象一下，一堵由不同大小的砖块完美拼凑而成的墙——这正是 Masonry 的精髓！它特别适用于创建图片库、作品集或任何你希望整洁、不浪费空间的内容。

开始使用 Bootstrap Masonry

设置你的项目

在我们深入代码之前，让我们先设置一下我们的项目。我们需要在我们的HTML文件中包含Bootstrap和Masonry库。如果一开始这看起来有点令人困惑——别担心，我会边走边解释每一部分。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Masonry Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 我们的内容将放在这里 -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js"></script>
</body>
</html>

让我们分解一下：

我们从基本的HTML结构开始。
在 <head> 中，我们链接到Bootstrap的CSS文件。
在 <body> 底部，我们包含了Bootstrap和Masonry的JavaScript文件。

这些文件为我们创建Masonry布局提供了所需的工具。

创建你的第一个 Masonry 布局

现在，让我们创建一个带有一些彩色盒子的简单Masonry布局。我们将这段代码添加到 <body> 标签内：

<div class="container my-5">
<div class="row" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">盒子 1</h5>
<p class="card-text">这是一个较短的盒子。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-success text-white">
<div class="card-body">
<h5 class="card-title">盒子 2</h5>
<p class="card-text">这个盒子稍微高一点。Masonry将会调整！</p>
<p class="card-text">看它如何完美地适应。</p>
</div>
</div>
</div>
<!-- 在这里添加更多的盒子 -->
</div>
</div>

让我们分解一下：

我们创建了一个容器，里面有一个行（row）。
data-masonry='{"percentPosition": true }' 属性告诉Bootstrap对这个行使用Masonry布局。
每个盒子是一个列（col-sm-6 col-lg-4），里面有一个卡片（card）。
我们使用不同的背景颜色（bg-primary、bg-success）来使我们的盒子在视觉上有所区分。

定制你的 Masonry 布局

现在我们有了基本的布局，让我们探索一些定制的方法。

添加不同大小的元素

Masonry的美妙之处在于它如何处理不同大小的元素。让我们添加一些内容不同的盒子：

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-title">盒子 3</h5>
<p class="card-text">这是一个非常高的盒子！</p>
<p class="card-text">它有很多内容。</p>
<p class="card-text">Masonry会确保它完美地适应。</p>
<p class="card-text">无论它有多高。</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title">盒子 4</h5>
<p class="card-text">又回到了一个较短的盒子。</p>
</div>
</div>
</div>

向你的 Masonry 布局中添加图片

Masonry非常适合图片库。让我们在我们的布局中添加一些图片：

<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="随机图片">
<div class="card-body">
<h5 class="card-title">图片卡片</h5>
<p class="card-text">这个卡片有一张图片。</p>
</div>
</div>
</div>

这段代码添加了一张从Lorem Picsum加载的随机图片的卡片。图片将以300x200像素加载，但你可以调整这些数字来得到不同大小的图片。

高级技术

过滤 Masonry 项目

我们可以添加的一个很酷的功能是过滤我们的Masonry项目。让我们添加一些分类按钮并给我们的项目分配分类：

<div class="container my-5">
<div class="mb-3">
<button class="btn btn-primary filter-btn" data-filter="all">全部</button>
<button class="btn btn-secondary filter-btn" data-filter="category1">分类 1</button>
<button class="btn btn-secondary filter-btn" data-filter="category2">分类 2</button>
</div>
<div class="row" id="masonry-grid" data-masonry='{"percentPosition": true }'>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category1">
<!-- 项目内容 -->
</div>
<div class="col-sm-6 col-lg-4 mb-4 masonry-item" data-category="category2">
<!-- 项目内容 -->
</div>
<!-- 更多项目... -->
</div>
</div>

为了让这个工作，我们需要添加一些JavaScript：

<script>
document.addEventListener('DOMContentLoaded', function() {
var grid = document.querySelector('#masonry-grid');
var msnry = new Masonry(grid, {
percentPosition: true
});

var filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(function(button) {
button.addEventListener('click', function() {
var filterValue = this.getAttribute('data-filter');
var items = grid.querySelectorAll('.masonry-item');

items.forEach(function(item) {
if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});

msnry.layout();
});
});
});
</script>

这段脚本执行以下操作：

在我们的网格上初始化Masonry。
给我们的过滤按钮添加点击事件监听器。
当一个按钮被点击时，根据它们的分类显示/隐藏项目。
过滤后，调用 msnry.layout() 来重新排列可见的项目。

结论

恭喜你！你刚刚创建了你的第一个Bootstrap Masonry布局。从基本的网格到高级的过滤，你现在有了创建动态、响应式布局的工具，这些布局将使你的网页脱颖而出。

记住，掌握网页开发的钥匙是练习。尝试使用不同的内容、布局和功能进行实验。不要害怕破坏东西——这通常是我们在编码中学到最有价值教训的方式。

继续构建，继续学习，最重要的是，享受其中的乐趣！在你意识到之前，你将能够创建出即使是最熟练的石匠也会嫉妒的网页布局。快乐编码！

Credits: Image by storyset