jQuery Masonry动态标题宽度

Question

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

我的工作示例如下：http://jsfiddle.net/hGnLH/

我正在尝试对此网站产生类似的影响：http://citizenmag.citizenm.com/（我希望标题只能与Masonry网格一样宽，并在用户更改浏览器宽度时重新调整大小）

非常感谢任何帮助/建议。

Answer 1

毕竟，这并不复杂。看看你的小提琴this update。

以下是相关的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（砌体列宽+沟槽宽度）并得到预期的标题宽度。我们为标题设置了动画，我们完成了。