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-tw">
<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">Box 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">Box 2</h5>
<p class="card-text">這個盒子有點高。Masonry 將會調整！</p>
<p class="card-text">看它如何恰如其分地嵌入。</p>
</div>
</div>
</div>
<!-- 在這裡添加更多的盒子 -->
</div>
</div>

讓我們來分析一下：

我們創建了一個容器，裡面有一個行。
data-masonry='{"percentPosition": true }' 屬性告訴 Bootstrap 對這一行使用 Masonry 佈局。
每個盒子都是一個列（col-sm-6 col-lg-4），裡面有一個卡片。
我們使用不同的背景顏色（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">Box 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">Box 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="Random image">
<div class="card-body">
<h5 class="card-title">Image Card</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 佈局。從基本的網格到進階的過濾，你現在有了創建有吸引力、響應式佈局的工具，這將使你的網頁頁面脫穎而出。

記住，精通網頁開發的關鍵是練習。嘗試不同的內容、佈局和功能。不要害怕弄壞東西——這通常是我们在編程中學到最有價值課程的方式。

繼續建設，繼續學習，最重要的是，享受其中的樂趣！在你意識到之前，你將會創建有會讓最熟練的石匠都會嫉妒的網頁佈局。快樂編程！

方法	描述
`Masonry(element[, options])`	在元素上初始化 Masonry
`msnry.layout()`	在進行更改後觸發佈局
`msnry.appended(elements)`	添加並佈局新追加的元素項目
`msnry.prepended(elements)`	添加並佈局新前置的元素項目
`msnry.destroy()`	完全移除 Masonry 功能

Credits: Image by storyset