jQuery Masonry 在附加容器后不会立即工作

Question

我将一个包含元素的 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,
  });
});

想法？

Answer 1

您检查过 Masonry 文档中的“卸载媒体和重叠”吗？另请参阅this discussion以及来自开发者的提示。您的问题还表现在没有 Ajax 加载和其他加载器的情况下，内容通常无法及时到达，因为它的数据量很大。

Masonry 需要每个 div 中的内容(图像、文本或视频)来计算出所有 div 尺寸 - 在第一次计算布局之前。如果您正在使用 imagesloaded 加载图像，或者您的图像非常大或相似，则 Masonry 没有尺寸(从内容来看)可供使用，并将显示此典型的“错误”。这就是为什么你的

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

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