jquery 最少代码的瀑布流

瀑布流（Waterfall Flow）是一种网页布局方式，它将内容以垂直排列的方式展示，每个元素根据自身的高度动态调整位置，形成类似瀑布的视觉效果。这种布局方式常用于图片展示、商品列表等场景。

基础概念

瀑布流布局的核心在于动态计算每个元素的位置，使得每一列的高度尽可能平衡，从而实现视觉上的均衡。

优势

视觉效果好：瀑布流布局能够充分利用页面空间，使内容展示更加美观。
加载性能好：可以分块加载内容，提高页面加载速度。
用户体验佳：用户可以快速浏览大量内容，无需滚动过多页面。

类型

纯JavaScript实现：通过JavaScript动态计算每个元素的位置。
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 Waterfall Layout</title>
    <style>
        .container {
            position: relative;
            width: 80%;
            margin: 0 auto;
        }
        .item {
            position: absolute;
            width: 200px;
            background-color: #ccc;
            margin: 5px;
            box-sizing: border-box;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="item" style="height: 200px;">Item 1</div>
        <div class="item" style="height: 300px;">Item 2</div>
        <div class="item" style="height: 250px;">Item 3</div>
        <div class="item" style="height: 180px;">Item 4</div>
        <div class="item" style="height: 320px;">Item 5</div>
        <div class="item" style="height: 220px;">Item 6</div>
    </div>

    <script>
        $(document).ready(function() {
            var container = $('.container');
            var items = $('.item');
            var columnCount = 3; // 列数
            var columns = [];

            // 初始化列
            for (var i = 0; i < columnCount; i++) {
                columns.push(0);
            }

            // 计算每个元素的位置
            items.each(function() {
                var minHeight = Math.min.apply(null, columns);
                var index = columns.indexOf(minHeight);
                $(this).css({
                    left: index * (200 + 10) + 'px',
                    top: minHeight + 'px'
                });
                columns[index] += $(this).outerHeight() + 5;
            });

            // 设置容器高度
            container.height(Math.max.apply(null, columns));
        });
    </script>
</body>
</html>