同位素过滤-在页面加载时加载来自每个类别的特定数字

同位素过滤是一种在网页上实现动态内容加载的技术，它允许在页面加载时根据特定条件加载内容。以下是一个简单的示例，展示如何在页面加载时加载来自每个类别的特定数字。

HTML结构

首先，我们需要一个基本的HTML结构来显示类别和数字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isotope Filtering</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="filters">
        <button class="filter" data-filter="all">All</button>
        <button class="filter" data-filter="category1">Category 1</button>
        <button class="filter" data-filter="category2">Category 2</button>
        <button class="filter" data-filter="category3">Category 3</button>
    </div>
    <div class="items">
        <!-- Items will be loaded here -->
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

接下来，我们需要一些CSS来美化页面和设置同位素过滤的样式。

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.filters {
    margin-bottom: 20px;
}

.filter {
    padding: 10px 20px;
    margin-right: 10px;
    cursor: pointer;
}

.items {
    display: flex;
    flex-wrap: wrap;
}

.item {
    width: 100px;
    height: 100px;
    margin: 5px;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}

JavaScript逻辑

最后，我们需要JavaScript来处理过滤逻辑并在页面加载时加载特定数字。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const itemsContainer = document.querySelector('.items');
    const filters = document.querySelectorAll('.filter');

    // Sample data
    const data = {
        category1: [1, 2, 3],
        category2: [4, 5, 6],
        category3: [7, 8, 9]
    };

    // Function to render items
    function renderItems(category) {
        itemsContainer.innerHTML = ''; // Clear previous items
        const numbers = data[category] || [];
        numbers.forEach(number => {
            const item = document.createElement('div');
            item.classList.add('item');
            item.textContent = number;
            itemsContainer.appendChild(item);
        });
    }

    // Event listeners for filters
    filters.forEach(filter => {
        filter.addEventListener('click', function() {
            const category = this.getAttribute('data-filter');
            renderItems(category);
        });
    });

    // Load initial items (e.g., category1)
    renderItems('category1');
});

解释

HTML结构：我们创建了一个包含过滤按钮和项目容器的简单页面。
CSS样式：我们设置了基本的样式来美化页面和设置同位素过滤的布局。
JavaScript逻辑：
- 我们定义了一个包含类别和数字的样本数据对象。
- 我们创建了一个函数renderItems来根据类别渲染项目。
- 我们为每个过滤按钮添加了事件监听器，当按钮被点击时，调用renderItems函数来更新项目容器。
- 我们在页面加载时调用renderItems函数来加载初始项目（例如，类别1的项目）。

通过这种方式，我们可以在页面加载时加载来自每个类别的特定数字，并根据用户的过滤选择动态更新内容。