调试高度 HTML、jQuery 砌体答案

【问题标题】：Debug height HTML, jQuery masonry调试高度 HTML、jQuery 砌体
【发布时间】：2012-09-10 00:03:47
【问题描述】：

我正在使用 jQuery 砌体并面临一个问题，框之间的边距（垂直）有时会有所不同。设置边距正确的唯一方法是使用浏览器控制台重新加载砌体

jQuery( ... ).masonry( 'reload' );

初始化砌体后，某些东西导致高度变化，我找不到它（仅静态内容，不涉及脚本）..

编辑：此问题与从远程目标加载的外部字体有关。

谢谢！

【问题讨论】：

如果没有 jsfiddle、在线沙箱，就无法使用 Chrome 的 devtools 或其他工具检查您的问题。肯定是“某些东西”导致了您的问题 - 但是在哪里可以查看它并检查代码？

标签： jquery html debugging height

【解决方案1】：

好吧，为了其他 SO 用户的利益，我认为公开回答问题可能会更好。

您是否使用来自 fonts.com、typekit.com 或 google.com/webfonts 的字体？如果您使用标准字体测试您的页面，然后一切正常，则可能是您的 webfonts 加载得很晚，这会阻止 Masonry 计算出每个砖块的正确垂直尺寸，从而弄乱垂直布局。如果您说重新加载后看起来正确，这可能意味着到那时所有内容和外部代码（文本、图像、字体、脚本等）都已加载，因此重新加载后一切看起来都符合预期。

【讨论】：

【解决方案2】：

感谢回答，经过搜索发现这个问题在Masonry网站https://github.com/desandro/masonry/issues/3有描述

解决方法：使用WebFont Loader，在字体加载回调后重新加载砌体

谢谢

【讨论】：