jquery 瀑布流

jQuery 瀑布流实现方法

瀑布流布局是一种常见的网页布局方式，适用于图片、商品展示等场景。以下是使用 jQuery 实现瀑布流的几种方法。

使用 jQuery 和 CSS 实现基础瀑布流

通过 jQuery 动态计算元素位置，结合 CSS 实现瀑布流效果。

$(function() {
    var $container = $('#waterfall');
    var $items = $container.children();
    var columnCount = 3;
    var columnHeights = [];

    // 初始化列高度数组
    for (var i = 0; i < columnCount; i++) {
        columnHeights.push(0);
    }

    // 设置容器宽度
    $container.width(columnCount * 300);

    // 遍历所有元素并定位
    $items.each(function() {
        var minHeight = Math.min.apply(null, columnHeights);
        var index = columnHeights.indexOf(minHeight);

        $(this).css({
            'position': 'absolute',
            'left': index * 300,
            'top': minHeight
        });

        columnHeights[index] += $(this).outerHeight(true);
    });

    // 设置容器高度
    $container.height(Math.max.apply(null, columnHeights));
});

使用 jQuery Masonry 插件

Masonry 是一个流行的瀑布流布局插件，使用简单且效果良好。

$(function() {
    $('#waterfall').masonry({
        itemSelector: '.item',
        columnWidth: 200,
        gutter: 10
    });
});

响应式瀑布流实现

结合窗口大小变化事件，实现响应式瀑布流布局。

function initWaterfall() {
    var windowWidth = $(window).width();
    var columnCount = windowWidth < 768 ? 2 : 3;

    // 清除旧布局
    $('#waterfall').css({
        'height': 'auto'
    });
    $('.item').css({
        'position': 'static'
    });

    // 重新布局
    var columnHeights = new Array(columnCount).fill(0);
    var itemWidth = $('#waterfall').width() / columnCount;

    $('.item').each(function() {
        var minHeight = Math.min.apply(null, columnHeights);
        var index = columnHeights.indexOf(minHeight);

        $(this).css({
            'position': 'absolute',
            'left': index * itemWidth,
            'top': minHeight,
            'width': itemWidth
        });

        columnHeights[index] += $(this).outerHeight(true);
    });

    $('#waterfall').height(Math.max.apply(null, columnHeights));
}

$(window).on('resize', initWaterfall);
$(document).ready(initWaterfall);

无限滚动加载更多内容

结合 AJAX 实现无限滚动加载更多瀑布流内容。

var isLoading = false;
var page = 1;

$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !isLoading) {
        isLoading = true;
        $('#loading').show();

        $.ajax({
            url: 'load-more.php',
            data: {page: page},
            success: function(data) {
                $('#waterfall').append(data).masonry('appended', data);
                page++;
                isLoading = false;
                $('#loading').hide();
            }
        });
    }
});

注意事项

• 确保所有图片加载完成后再进行布局计算，可使用 imagesLoaded 插件
• 考虑添加动画效果提升用户体验
• 移动端需特别注意性能优化
• 对于大量数据，建议实现分页或虚拟滚动

以上方法提供了从基础到高级的 jQuery 瀑布流实现方案，可根据项目需求选择合适的实现方式。