如何用JavaScript/jQuery获取Masonry插件图片的浏览器实际显示高度？

问题原因 #

你遇到的问题核心是：Masonry是异步完成布局的，且图片加载可能滞后于JS执行时机。当你调用img.offsetHeight、img.naturalHeight这些属性时，Masonry还没完成图片容器的布局调整，或者图片本身还没加载完毕，导致拿到的是图片初始占位高度（30.59），而非最终渲染高度。

可行解决方案 #

• 等待Masonry布局完成后获取
  Masonry提供了layoutComplete事件，会在所有元素完成布局后触发，此时获取高度才是准确的：

  // 初始化Masonry实例
  const masonry = new Masonry('.grid', {
    itemSelector: '.grid-item'
  });
  
  masonry.on('layoutComplete', function(laidOutItems) {
    laidOutItems.forEach(item => {
      const img = item.element.querySelector('img');
      if (img) {
        const realHeight = img.offsetHeight;
        console.log('图片真实显示高度:', realHeight);
      }
    });
  });
  

• 结合图片加载完成事件
  如果图片加载速度慢于Masonry初始化，即使布局完成，图片还没渲染也会导致高度错误。可以用Masonry配套的imagesLoaded插件确保图片全部加载后再布局：

  const grid = document.querySelector('.grid');
  
  imagesLoaded(grid, () => {
    const masonry = new Masonry(grid, {
      itemSelector: '.grid-item'
    });
  
    masonry.on('layoutComplete', laidOutItems => {
      laidOutItems.forEach(item => {
        const img = item.element.querySelector('img');
        console.log('真实高度:', img.offsetHeight);
      });
    });
  });
  

• 使用计算样式获取最终渲染高度
  若上述方法仍无效，可直接通过浏览器计算后的样式获取高度，这是最直接拿到渲染后值的方式：

  const img = document.querySelector('.your-image-selector');
  const computedStyle = window.getComputedStyle(img);
  const realHeight = parseFloat(computedStyle.height);
  console.log(realHeight);
  

补充说明 #

• img.naturalHeight：返回的是图片原始像素高度，和浏览器显示的缩放后高度无关；
• offsetHeight：只有在元素完成布局渲染后，才会返回正确的显示高度；
• jQuery的width()：仅获取宽度，和高度无关，且同样受执行时机影响。

内容的提问来源于stack exchange，提问作者Robert Carmichael