jQuery实现响应式瀑布流 - 实现灯箱效果

$(document).ready(function() {
    var $container = $('#container'), // 获取容器元素
        colWidth = 200, // 列宽
        gutter = 30; // 列间隙
 
    // 初始化当前列数
    $container.width(colWidth * 4);
 
    var $filterLinks = $('#filter a'); // 获取筛选链接
    var $sortBy = $('#sortBy'); // 获取排序选项
 
    $filterLinks.click(function() {
        $filterLinks.removeClass('current');
        $(this).addClass('current');
        var filterValue = $(this).attr('data-filter');
        $container.isotope({
            filter: filterValue
        });
        return false;
    });
 
    // 当窗口大小变化时，重新布局
    $(window).resize(function() {
        var width = $container.width();
        columnNumbers = Math.floor(width / (colWidth + gutter));
        columnNumbers = columnNumbers < 4 ? columnNumbers : 4; // 限制最多4列
        $container.width(columnNumbers * (colWidth + gutter)).isotope('reLayout');
    });
 
    // 初始化 isotope 插件
    $container.isotope({
        masonry: {
            columnWidth: colWidth + gutter
        }
    });
});

这段代码实现了一个简化版的瀑布流效果，并且在窗口大小改变时能够重新布局。它使用了jQuery和isotope插件，并对代码进行了必要的注释以便理解。