jQuery Masonry 动态标题宽度

Question

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

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

我正试图对这个网站产生类似的影响:http://citizenmag.citizenm.com/ (我希望标题仅与 Masonry 网格一样宽，并在用户更改浏览器宽度时重新调整大小)

如有任何帮助/建议，我们将不胜感激。

Answer 1

毕竟没那么复杂。看看this update你的 fiddle 。

这是相关的 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 宽度减去大图像宽度。有了这个，我们可以通过将其除以 mansonry 列宽度加上排水沟宽度来获得列数。有了列号，我们可以将它乘以 245(Masonry 列宽 + 排水沟宽度)并获得预期的标题宽度。我们为标题设置动画，我们就完成了。