jquery - jQuery Masonry 动态标题宽度

Question

所以我正在尝试制作一个重新调整为 jQuery Masonry 网格当前宽度的标题。

我的工作示例在这里：http: //jsfiddle.net/hGnLH/

我正在尝试对该站点进行类似的影响： http: //citizenmag.citizenm.com/（我希望标题仅与砌体网格一样宽，并在用户更改浏览器宽度时重新调整大小）

任何帮助/建议将不胜感激。

Answer 1

毕竟没那么复杂。看看你的小提琴的这个更新。

这是相关的JS：

$(function() {
    $("#inner").masonry({
        columnWidth: 230,
        gutterWidth: 15,
        isAnimated: true,
        cornerStampSelector: ".corner-stamp"
    });

    $(window).resize(function() {
        var totalColWidth = $("#inner").outerWidth() - 475;
        var columns = parseInt(totalColWidth / 245);

        $("#header").animate({width:(columns*245) + 475},{duration:300, queue:false});

    });
});

在窗口调整大小时，它会计算“列部分”的宽度，即#inner宽度减去大图像宽度。这样，我们可以通过将其除以人工列宽加上排水沟宽度来获得列数。有了列号，我们可以将其乘以 245（砌体列宽 + 排水沟宽度）并获得预期的标题宽度。我们为标题设置动画，我们就完成了。