如何实现图片列表初始显3张、点击查看更多加载更多的功能？

需求是让图片列表初始仅显示3张，点击「查看更多」按钮后加载剩余图片，但当前页面加载后会显示全部4张图片，不符合要求。

问题根源 #

所有.hobby元素默认处于可见状态，现有JavaScript仅处理了点击按钮后的显示逻辑，没有对初始状态下的多余图片做隐藏处理。

解决方案 #

通过CSS初始隐藏第4张及以后的图片，同时优化JavaScript的显示逻辑，避免布局冲突和数组越界问题。

1. 修改CSS代码

在.hobby样式后添加初始隐藏规则：

.hobby:nth-child(n+4) {
    display: none;
}

这条规则会选中第4个及之后的.hobby元素（CSS的nth-child从1开始计数），将其初始状态设置为隐藏，确保页面加载时只显示前3张图片。

2. 优化JavaScript代码

调整循环逻辑，增加边界判断，并适配grid布局的显示属性：

let loadMoreBtn = document.querySelector('.load-more');
let currentItem = 3;

loadMoreBtn.onclick = () => {
    let boxes = [...document.querySelectorAll('.container .hobby-list .hobby')];
    // 增加数组边界判断，避免访问不存在的元素报错
    for (let i = currentItem; i < currentItem + 3 && i < boxes.length; i++) {
        // 使用block适配grid布局的默认显示方式
        boxes[i].style.display = 'block';
    }
    currentItem += 3;

    if (currentItem >= boxes.length) {
        loadMoreBtn.style.display = 'none';
    }
}

• 新增i < boxes.length判断：当剩余图片不足3张时，防止因访问不存在的数组元素导致报错。
• 将inline-block改为block：父容器使用grid布局，block是grid子元素的默认显示方式，能更好地适配布局结构。

修改后的完整代码 #

HTML（无需修改）

<div id="Hobby">
    <div class="container">
        <div class="hobby-list">
            <div class="hobby">
                <img src="Assets/hobby_1.png">
                    <div class="layer">
                        <h3>Playing soccer</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_2.png">
                    <div class="layer">
                        <h3>Playing game</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_3.png">
                    <div class="layer">
                        <h3>Playing basketball</h3><br>
                    </div>
            </div>
            <div class="hobby">
                <img src="Assets/hobby_4.png">
                    <div class="layer">
                        <h3>Painting</h3><br>
                    </div>
            </div>
        </div>
        <div class="load-more">See more</div>
    </div>
</div>

CSS

#Hobby{
    padding: 50px 0;
}
.hobby-list{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 40px;
}
.hobby{
    border-radius: 10px;
    position: relative;
}
/* 新增初始隐藏规则 */
.hobby:nth-child(n+4) {
    display: none;
}
.hobby img{
    width: 100%;
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
}
.layer{
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(0,0,0,0.6), #31c48d);
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    transition: height 0.5s;
}

.layer a{
    margin-top: 15px;
    color: #31c48d;
    text-decoration: none;
    font-size: 18px;
    line-height: 60px;
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
}

JavaScript

let loadMoreBtn = document.querySelector('.load-more');
let currentItem = 3;

loadMoreBtn.onclick = () => {
    let boxes = [...document.querySelectorAll('.container .hobby-list .hobby')];
    for (let i = currentItem; i < currentItem + 3 && i < boxes.length; i++) {
        boxes[i].style.display = 'block';
    }
    currentItem += 3;

    if (currentItem >= boxes.length) {
        loadMoreBtn.style.display = 'none';
    }
}

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