图片墙 jquery

基础概念

图片墙（Image Wall）是一种常见的网页设计元素，通常用于展示一系列图片。它可以通过不同的布局方式（如网格布局、瀑布流布局等）来展示图片，给用户带来丰富的视觉体验。

类型

网格布局：图片以网格的形式排列，每个图片占据相同的空间。
瀑布流布局：图片自上而下排列，每列的高度根据图片大小动态调整，形成类似瀑布的效果。
自由布局：图片可以自由排列，没有固定的布局规则。

应用场景

社交媒体：用于展示用户上传的照片。
电商网站：用于展示商品图片。
新闻网站：用于展示新闻配图。

示例代码（jQuery）

以下是一个简单的图片墙示例，使用jQuery和CSS实现瀑布流布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片墙</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        .column {
            width: 25%;
            margin-bottom: 20px;
        }
        .column img {
            width: 100%;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">
            <img src="image1.jpg" alt="Image 1">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="column">
            <img src="image3.jpg" alt="Image 3">
            <img src="image4.jpg" alt="Image 4">
        </div>
        <div class="column">
            <img src="image5.jpg" alt="Image 5">
            <img src="image6.jpg" alt="Image 6">
        </div>
        <div class="column">
            <img src="image7.jpg" alt="Image 7">
            <img src="image8.jpg" alt="Image 8">
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 动态调整图片墙布局
            function adjustLayout() {
                var columns = $('.column');
                var columnHeights = [];
                columns.each(function() {
                    columnHeights.push($(this).height());
                });

                var maxHeight = Math.max.apply(null, columnHeights);
                columns.height(maxHeight);
            }

            // 监听窗口大小变化，重新调整布局
            $(window).resize(function() {
                adjustLayout();
            });

            // 初始化布局
            adjustLayout();
        });
    </script>
</body>
</html>