用jquery实现图片墙

基础概念

图片墙是一种常见的网页设计元素，通常用于展示一系列图片。用户可以通过滚动或点击来浏览这些图片。jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，常用于简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。

类型

瀑布流布局：图片按列排列，每列高度不一，整体呈现瀑布状。
网格布局：图片按固定大小的网格排列。
动态加载：图片在用户滚动到页面底部时动态加载。

应用场景

图片展示网站：如摄影网站、艺术品展示等。
电商网站：产品图片展示。
社交媒体：用户上传的图片展示。

示例代码

以下是一个简单的 jQuery 图片墙示例，使用网格布局：

<!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-wall {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .image-wall img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="image-wall">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <!-- 添加更多图片 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 可以在这里添加更多的 jQuery 功能，如动态加载图片等
        });
    </script>
</body>
</html>