基于按钮点击，用原生HTML/CSS/JS实现加载更多元素功能

调整后的HTML #

给需要默认隐藏的元素添加hidden类，同时给按钮和计数信息加上类名方便JS选择：

<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 hidden"></div>
    <div class="item hidden"></div>
    <div class="item hidden"></div>
    <div class="item hidden"></div>
    <div class="item hidden"></div>
    <div class="item hidden"></div>
  </div>
  <p class="count-info">Showing 4 of 10</p>
  <button class="load-more-btn">Load more</button>
</div>

优化后的CSS #

适配每行4个的网格布局，添加隐藏类样式，同时确保按钮位置正确：

.container {
  padding: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.items-container {
  display: flex;
  flex-wrap: wrap; /* 开启换行，实现每行4个元素 */
  gap: 16px;
  margin-bottom: 24px; /* 和按钮保持间距 */
}

.item {
  flex: 0 0 calc(25% - 12px); /* 减去gap的影响，确保每行刚好4个 */
  background-color: lightblue;
  height: 320px;
  opacity: 1;
  transition: opacity 0.3s ease; /* 可选：添加平滑显示动画 */
}

/* 初始隐藏元素的类 */
.hidden {
  display: none;
}

.load-more-btn {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  margin: 0 auto;
  display: block; /* 让按钮居中，且始终位于容器下方 */
}

.load-more-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.count-info {
  text-align: center;
  margin-bottom: 16px;
}

原生JavaScript逻辑 #

实现加载更多、计数更新和按钮状态控制：

document.addEventListener('DOMContentLoaded', () => {
  const items = document.querySelectorAll('.item');
  const loadBtn = document.querySelector('.load-more-btn');
  const countText = document.querySelector('.count-info');
  const perPage = 4;
  let visibleItems = 4; // 默认显示4个
  const totalItems = 10; // 若元素数量不固定，可改为items.length

  // 更新显示计数文本
  const updateCount = () => {
    countText.textContent = `Showing ${Math.min(visibleItems, totalItems)} of ${totalItems}`;
  };

  // 加载更多事件
  loadBtn.addEventListener('click', () => {
    const start = visibleItems;
    const end = Math.min(visibleItems + perPage, totalItems);
    
    // 批量显示下一批元素
    for (let i = start; i < end; i++) {
      items[i]?.classList.remove('hidden');
    }

    visibleItems = end;
    updateCount();

    // 所有元素加载完成后禁用按钮
    if (visibleItems >= totalItems) {
      loadBtn.disabled = true;
      loadBtn.textContent = 'All items loaded';
    }
  });

  // 初始化计数
  updateCount();
});

关键思路说明 #

• 隐藏/显示控制：用CSS类hidden控制元素初始状态，点击按钮时移除该类实现显示，无需操作DOM结构。
• 网格布局适配：通过flex-wrap: wrap和计算元素宽度，确保每行刚好显示4个元素，自动适配换行。
• 按钮位置：将按钮设为块级元素并居中，同时给元素容器添加底部间距，保证按钮始终在最后一行可见元素的正下方。
• 状态管理：跟踪已显示元素数量，每次加载后更新计数，当所有元素显示时禁用按钮，避免重复点击。
• 灵活性：如果总元素数量是动态的，把totalItems改为items.length即可自动适配，无需硬编码。

内容的提问来源于stack exchange，提问作者cts