加载后通过JS动态添加的HTML无法正常使用Masonry布局

针对你的场景，常见问题和修复方案如下： #

• 元素资源未加载完成：动态添加的HTML里如果包含图片等异步加载的资源，Masonry执行layout时元素实际尺寸还没确定，导致布局错位。
  解决：等元素内所有资源加载完成后再触发布局，可借助imagesLoaded工具（如果项目里没有，也可以给图片预设固定宽高）：

  $('#service_its').append(wrapper);
  $('.masIts').imagesLoaded(function() {
    $(this).masonry('layout');
  });
  

• 未初始化Masonry实例：如果.masIts是这次动态新增的容器，之前没有初始化过Masonry，直接调用layout方法会无效。
  解决：先初始化Masonry再执行布局：

  $('#service_its').append(wrapper);
  var $grid = $('.masIts').masonry({
    // 填写你的Masonry配置，比如 itemSelector: '.grid-item'
  });
  $grid.masonry('layout');
  

• 选择器匹配精度问题：有时候动态元素的嵌套层级会导致.masIts选择器匹配到旧元素，而非刚添加的新元素。
  解决：直接操作刚插入的DOM元素，避免全局选择器的歧义：

  var $newContent = $(wrapper);
  $('#service_its').append($newContent);
  $newContent.find('.masIts').masonry('layout');
  

• 版本调用方式差异：不同版本的Masonry调用语法可能不同，部分新版需要调整调用方式：

  $('.masIts').masonry().layout();
  

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