如何实现水平列表仅显示两行并支持逐行加载更多？

1. 调整HTML结构 #

添加"显示更多"按钮，用于触发加载更多行的操作：

<div class="items-container">
  <span class="items">
    <span class="item"><span class="item-inner"><span class="item-text">Item 1</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 2</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 3</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 4</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 5</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 6</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 7</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 8</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 9</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 10</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 11</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 12</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 13</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 14</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 15</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 16</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 17</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 18</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 19</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 20</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 21</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 22</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 23</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 24</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 25</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 26</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 27</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 28</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 29</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 30</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 31</span></span></span>
    <span class="item"><span class="item-inner"><span class="item-text">Item 32</span></span></span>
  </span>
  <button class="show-more">显示更多</button>
</div>

2. 优化CSS样式 #

移除.items的固定max-height，添加按钮的基础样式：

.items {
  overflow-y: hidden;
  /* 移除固定max-height，由JS动态设置 */
}

.item {
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  display: inline-block;
  padding: 0;
  text-align: center;
  text-decoration: none!important;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;
}

.item-inner {
  display: block;
  position: relative;
  overflow: hidden;
  height: 29px;
  border-radius: 2px;
}

.item-text {
  background-color: transparent;
  border: 0;
  display: block;
  font-size: 13px;
  line-height: 29px;
  margin: 0;
  outline: 0;
  padding: 0 10px 0 11px;
  text-align: center;
  white-space: nowrap;
}

.show-more {
  margin-top: 10px;
  padding: 5px 10px;
  cursor: pointer;
  display: none; /* 默认隐藏，由JS判断是否显示 */
}

3. JavaScript实现核心逻辑 #

通过动态计算行高，控制容器显示行数，同时支持窗口 resize 自适应：

document.addEventListener('DOMContentLoaded', function() {
  const itemsContainer = document.querySelector('.items');
  const showMoreBtn = document.querySelector('.show-more');
  let rowHeight = 0;
  let totalRows = 0;
  let visibleRows = 2;

  // 计算行高和总行数
  function calculateRows() {
    // 临时显示所有内容获取真实高度
    const originalMaxHeight = itemsContainer.style.maxHeight;
    itemsContainer.style.maxHeight = 'none';
    
    const firstItem = itemsContainer.querySelector('.item');
    if (!firstItem) return;
    
    const firstItemRect = firstItem.getBoundingClientRect();
    let currentTop = firstItemRect.top;
    let itemIndex = 0;
    const allItems = itemsContainer.querySelectorAll('.item');
    
    // 遍历找到第一行的边界
    while (itemIndex < allItems.length) {
      const rect = allItems[itemIndex].getBoundingClientRect();
      if (rect.top > currentTop) break;
      itemIndex++;
    }
    // 计算单一行的实际高度
    rowHeight = allItems[itemIndex - 1].getBoundingClientRect().bottom - firstItemRect.top;
    // 计算总行数
    totalRows = Math.ceil(itemsContainer.scrollHeight / rowHeight);
    
    // 恢复原有高度设置
    itemsContainer.style.maxHeight = originalMaxHeight || '';
  }

  // 更新可见行数和按钮状态
  function updateVisibleRows() {
    itemsContainer.style.maxHeight = `${visibleRows * rowHeight}px`;
    showMoreBtn.style.display = visibleRows >= totalRows ? 'none' : 'block';
  }

  // 初始化
  calculateRows();
  updateVisibleRows();

  // 点击加载更多
  showMoreBtn.addEventListener('click', function() {
    visibleRows += 2;
    updateVisibleRows();
  });

  // 窗口大小变化时重新计算
  window.addEventListener('resize', function() {
    calculateRows();
    updateVisibleRows();
  });
});

关键逻辑说明 #

• 行高计算：通过遍历item找到第一行的边界，计算出单一行的实际高度，确保自适应容器宽度变化。
• 动态控制高度：通过设置.items的max-height为可见行数 × 行高，实现仅显示指定行数的效果。
• 窗口自适应：监听窗口resize事件，重新计算行高和总行数，确保容器宽度变化时显示行数正确。
• 加载更多逻辑：每次点击按钮增加2行可见数，直到所有行都显示后隐藏按钮。

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