Question

我将带有元素的div附加到DOM中，并希望使用masonry来排列这些内部元素。但是，除非我在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文档中选中了“Unloaded media and overlap”？另请参阅this discussion以及开发人员的提示。您的问题也显示没有Ajax加载和其他加载器，通常内容不及时到达，因为它非常重数据。

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

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

适用于这种情况，因为内容有足够的时间来加载/追加/显示/构建。

附加容器后，jQuery Masonry不能立即工作

1 个答案: