2

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

想法？

4

1 回答 1

1

您是否检查了 Masonry 文档中的“未加载的媒体和重叠”？另请参阅此讨论和开发人员的提示。在没有 Ajax 加载和其他加载器的情况下，您的问题也显示出来，通常是内容没有及时到达，因为它的数据量很大。

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

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

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

于 2012-10-24T06:56:04.733 回答