js搜索图片分页

在JavaScript中实现图片搜索分页，通常涉及到以下几个基础概念：

基础概念

分页（Pagination）：将大量数据分割成多个部分，每次只显示一部分数据，以提高用户体验和页面加载速度。
AJAX（Asynchronous JavaScript and XML）：用于在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
DOM操作：通过JavaScript操作HTML文档对象模型，动态地修改页面内容。

类型

前端分页：所有数据处理在客户端完成，适用于数据量较小的情况。
后端分页：服务器返回指定页的数据，适用于数据量较大的情况。

应用场景

图片库浏览
商品展示
新闻列表

实现步骤

HTML结构：创建一个容器来显示图片和分页控件。
CSS样式：美化图片和分页控件。
JavaScript逻辑：实现分页逻辑和AJAX请求。

示例代码

以下是一个简单的示例，展示如何使用JavaScript实现图片搜索分页：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片搜索分页</title>
    <style>
        .image-container {
            display: flex;
            flex-wrap: wrap;
        }
        .image-item {
            width: 100px;
            height: 100px;
            margin: 5px;
        }
        .pagination {
            margin-top: 20px;
            text-align: center;
        }
        .pagination button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="image-container" class="image-container"></div>
    <div class="pagination" id="pagination"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

const imageContainer = document.getElementById('image-container');
const pagination = document.getElementById('pagination');
let currentPage = 1;
const pageSize = 10; // 每页显示10张图片

// 模拟从服务器获取图片数据
function fetchImages(page) {
    return new Promise((resolve) => {
        setTimeout(() => {
            const images = [];
            for (let i = (page - 1) * pageSize + 1; i <= page * pageSize; i++) {
                images.push(`https://via.placeholder.com/100?text=Image+${i}`);
            }
            resolve(images);
        }, 500);
    });
}

// 渲染图片
function renderImages(images) {
    imageContainer.innerHTML = '';
    images.forEach((imageUrl) => {
        const img = document.createElement('img');
        img.src = imageUrl;
        img.alt = 'Image';
        img.classList.add('image-item');
        imageContainer.appendChild(img);
    });
}

// 渲染分页控件
function renderPagination(totalPages) {
    pagination.innerHTML = '';
    for (let i = 1; i <= totalPages; i++) {
        const button = document.createElement('button');
        button.innerText = i;
        button.addEventListener('click', () => {
            currentPage = i;
            fetchAndRenderImages();
        });
        if (i === currentPage) {
            button.disabled = true;
        }
        pagination.appendChild(button);
    }
}

// 获取并渲染图片和分页控件
async function fetchAndRenderImages() {
    const images = await fetchImages(currentPage);
    renderImages(images);
    renderPagination(10); // 假设总共有10页
}

// 初始化
fetchAndRenderImages();

解释

HTML：创建了一个容器来显示图片和一个分页控件。
CSS：简单的样式来美化图片和分页控件。
JavaScript：
- fetchImages函数模拟从服务器获取图片数据。
- renderImages函数将图片渲染到页面上。
- renderPagination函数生成并渲染分页控件。
- fetchAndRenderImages函数负责获取图片数据并渲染图片和分页控件。