本文将介绍如何使用纯 CSS 和 JavaScript 实现一个“加载更多”的功能，点击按钮后，页面上隐藏的元素会分批次地显示出来。通过控制元素的 display 属性，我们可以实现元素的隐藏和显示。同时，我们将更新页面上的计数器，显示当前已显示的元素数量。
HTML 结构
首先，我们需要定义 HTML 结构。创建一个容器 container，包含一个 items-container 用于放置需要动态显示的元素，一个显示当前元素数量的段落 p，以及一个“加载更多”按钮。
<div class="container">
<div class="items-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<p></p>
<button>
Load more
</button>
</div>CSS 样式
接下来，定义 CSS 样式，设置容器的基本样式，以及每个 item 的样式。默认情况下，我们将使用 Flexbox 布局，并设置 item 的宽度和背景颜色。
立即学习“Java免费学习笔记（深入）”；
.container {
padding: 16px;
}
.items-container {
flex-direction: row;
display: flex;
gap: 16px;
flex-wrap: wrap; /* 允许项目换行 */
}
.item {
flex: 0 0 auto;
width: 23%; /* 调整宽度，确保每行显示 4 个元素 */
background-color: lightblue;
height: 320px;
}注意：这里使用了 flex-wrap: wrap; 允许元素换行，并且将 item 的宽度调整为 23%，留出一些间隙，确保每行可以显示 4 个元素。
JavaScript 逻辑
现在，我们编写 JavaScript 代码来实现点击按钮后逐步显示元素的功能。
const items = Array.from(document.querySelectorAll('.item')); // 获取所有 item 元素
let count = 4; // 初始显示 4 个元素
function updateCount() {
// 更新计数器，显示当前已显示的元素数量
document.querySelector('p').innerHTML = 'Showing ' + count + ' of ' + items.length;
}
function updateItems() {
// 根据 count 值，更新元素的 display 属性
for (let index = 0; index < count; index++) {
items[index].style.display = ''; // 显示元素
}
for (let index = count; index < items.length; index++) {
items[index].style.display = 'none'; // 隐藏元素
}
updateCount(); // 更新计数器
}
updateItems(); // 初始化显示
document.querySelector('button').addEventListener('click', () => {
// 按钮点击事件监听器
count += 4; // 每次增加显示 4 个元素
count = count > items.length ? items.length : count; // 确保 count 不超过元素总数
updateItems(); // 更新元素显示
});代码解释：
- 获取元素： document.querySelectorAll('.item') 获取所有 class 为 item 的元素，并将其转换为数组 items。
- 初始计数器： count 变量表示当前显示的元素数量，初始值为 4。
- updateCount() 函数： 更新页面上的计数器，显示当前已显示的元素数量。
- updateItems() 函数： 遍历所有 item 元素，根据 count 的值，设置元素的 display 属性。如果索引小于 count，则显示元素；否则，隐藏元素。
- 初始化显示： 在页面加载时，调用 updateItems() 函数，显示初始的 4 个元素。
- 按钮点击事件： 为“加载更多”按钮添加点击事件监听器。每次点击按钮，count 的值增加 4。如果 count 的值超过了元素总数，则将其设置为元素总数。然后，调用 updateItems() 函数，更新元素的显示状态。
总结
通过以上步骤，我们成功地实现了一个“加载更多”的功能。用户点击按钮后，页面上的元素会分批次地显示出来，并且页面上的计数器会实时更新。这个方法简单易懂，适用于各种需要动态加载内容的场景。
注意事项：
- 确保 HTML 结构正确，CSS 样式生效，并且 JavaScript 代码能够正确执行。
- 可以根据实际需求，调整每次加载的元素数量和样式。
- 为了更好的用户体验，可以添加加载中的动画效果。
