jquery 图片瀑布展示

基础概念

jQuery 图片瀑布展示是一种网页设计技术，用于将图片以垂直或水平的方式排列，通常用于创建视觉上吸引人的图片墙或画廊。这种布局方式可以有效地利用页面空间，提高图片的展示效果。

类型

垂直瀑布流：图片垂直排列，每张图片占据一行。
水平瀑布流：图片水平排列，每行可以容纳多张图片。
混合瀑布流：结合垂直和水平排列，提供更复杂的布局。

应用场景

图片画廊：用于展示大量图片，如摄影作品、艺术品等。
商品展示：在电商网站中展示商品图片，提供直观的商品浏览体验。
社交媒体：用于展示用户上传的照片，增加页面的互动性和吸引力。

示例代码

以下是一个简单的 jQuery 图片瀑布流布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 瀑布流布局</title>
    <style>
        .container {
            position: relative;
            width: 100%;
        }
        .item {
            position: absolute;
            transition: top 0.5s, left 0.5s;
        }
        .item img {
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 图片项 -->
        <div class="item"><img src="image1.jpg" alt="Image 1"></div>
        <div class="item"><img src="image2.jpg" alt="Image 2"></div>
        <div class="item"><img src="image3.jpg" alt="Image 3"></div>
        <!-- 更多图片项 -->
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function layoutImages() {
                var container = $('.container');
                var itemWidth = $('.item').outerWidth(true);
                var columns = Math.floor(container.width() / itemWidth);
                var columnHeights = new Array(columns).fill(0);
                var items = $('.item');

                items.each(function() {
                    var minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights));
                    $(this).css({
                        top: columnHeights[minHeightIndex],
                        left: minHeightIndex * itemWidth
                    });
                    columnHeights[minHeightIndex] += $(this).outerHeight(true);
                });

                container.height(Math.max(...columnHeights));
            }

            layoutImages();
            $(window).resize(layoutImages);
        });
    </script>
</body>
</html>