jquery 响应式瀑布流

基础概念

jQuery 响应式瀑布流是一种网页布局技术，它结合了 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>Responsive Masonry Layout</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            margin: -10px; /* Adjust for spacing */
        }
        .item {
            width: calc(25% - 20px); /* 4 columns on larger screens */
            margin: 10px;
            background: #ccc;
            padding: 20px;
            box-sizing: border-box;
        }
        @media (max-width: 768px) {
            .item {
                width: calc(50% - 20px); /* 2 columns on medium screens */
            }
        }
        @media (max-width: 480px) {
            .item {
                width: calc(100% - 20px); /* 1 column on small screens */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <!-- Add more items as needed -->
    </div>

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

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

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

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