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 に答える