所以我正在尝试制作一个重新调整大小以适应 jQuery Masonry 网格当前宽度的标题。
我的工作示例在这里:http://jsfiddle.net/hGnLH/
我正试图对这个网站产生类似的影响:http://citizenmag.citizenm.com/ (我希望标题仅与 Masonry 网格一样宽,并在用户更改浏览器宽度时重新调整大小)
如有任何帮助/建议,我们将不胜感激。
最佳答案
毕竟没那么复杂。看看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 列宽 + 排水沟宽度)并获得预期的标题宽度。我们为标题设置动画,我们就完成了。
关于jQuery Masonry 动态标题宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8011837/