jQuery'；在添加容器后，不要立即工作

我将一个包含元素的div附加到DOM中，并希望使用砖石结构来排列这些内部元素。但是，除非我在setTimeout回调中初始化砖石结构，否则砖石结构将中断

// I have a `#media` div in my html
var outerDiv = $('<div>').attr('style', 'width: 720px;');
this.$('#media').append(div);

// I create lots of boxes in a boxes div
var boxes = $('<div>').append(
  $('<div>').attr('style', 'width: 160px; height: 180px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item'),
  $('<div>').attr('style', 'width: 340px; height: 120px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item'),
  $('<div>').attr('style', 'width: 160px; height: 120px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item'),
  $('<div>').attr('style', 'width: 160px; height: 180px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item'),
  $('<div>').attr('style', 'width: 340px; height: 100px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item'),
  $('<div>').attr('style', 'width: 340px; height: 160px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item'),
  $('<div>').attr('style', 'width: 160px; height: 180px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item'),
  $('<div>').attr('style', 'width: 160px; height: 120px; margin: 10px 0px; ' +
      'background-color: red; float: left;').addClass('item')
);

outerDiv.append(boxes);

// without the setTimeout wrapper, this breaks (in Chrome, everything clusters
// in the top left; in Firefox, everything lines up in a column on the left)
setTimeout(function() {
  boxes.masonry({
    itemSelector: '.item',
    columnWidth: 180,
    isResizable: true,
  });
});

//我的html中有一个`#media` div
var outerDiv=$（''）.attr（'style'，'width:720px；'）；
本.$（“#媒体”）.append（div）；
//我在一个box div中创建了很多box
变量框=$（''）。追加(
$（''）.attr（'style'，'width:160px；height:180px；margin:10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'item'），
$（''）.attr（'样式'，'宽度：340px；高度：120px；边距：10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'item'），
$（''）.attr（'样式'，'宽度：160px；高度：120px；边距：10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'item'），
$（''）.attr（'style'，'width:160px；height:180px；margin:10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'item'），
$（''）.attr（'样式'，'宽度：340px；高度：100px；边距：10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'item'），
$（''）.attr（'样式'，'宽度：340px；高度：160px；边距：10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'item'），
$（''）.attr（'style'，'width:160px；height:180px；margin:10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'item'），
$（''）.attr（'样式'，'宽度：160px；高度：120px；边距：10px 0px；'+
'背景色：红色；浮动：左；'）.addClass（'项'）
);
外部附加（框）；
//如果没有setTimeout包装器，这将中断（在Chrome中，一切都是群集的）
//在左上角；在Firefox中，所有内容都排列在左侧的一列中）
setTimeout（函数（）{
砌体({
itemSelector:“.item”，
列宽：180，
isResizable:没错，
});
});

想法？

您是否检查了砌体文档中的“卸载介质和重叠”？另请参见开发人员提供的提示。您的问题还显示，如果没有Ajax加载和其他加载程序，内容往往无法及时到达，因为它的数据量非常大

在第一次计算布局之前，砌体需要每个分区（图像、文本或视频）中的内容来计算所有分区尺寸。如果您正在加载带有imagesloaded的图像，或者如果您的图像非常大，或者类似，则砌体没有可用于工作的尺寸（来自内容），并且将显示此典型的“错误”。这就是为什么你的

setTimeout(function() {
  boxes.masonry({
  itemSelector: '.item',
  columnWidth: 180,
  isResizable: true,
});

---

在这种情况下有效，因为足够长的时间用于加载/附加/显示/构建内容。

如果您阅读了文档，则可以找到附加的方法。当您有一个容器，其中的盒子已经被masonried，然后在里面附加额外的元素时，added方法非常有用。这不是这里的问题：在初始安装过程中会出现错误。