1

プロジェクトの1つでIsotopeを使用していますが、奇妙な理由でデモのように機能させることができません（要素＃26 Ironをクリックすると、＃30Zincが上に移動して大きな空きスペースを埋める方法に気付くでしょう。ブロックが残っているでしょう）。

これがimatのjsfiddleです。カテゴリ2をクリックすると、カテゴリ3と4があるはずの2つの黒いスペースがあることに注意してください。

これが私の同位体jsです：

$(document).ready(function() {
  var $iContainer = $('#ls-container');

  $iContainer.isotope({
    itemSelector : '.ls-item',
    layoutMode : 'masonry',
    masonry : {
      columnWidth : 170
    }
  });

  $iContainer.delegate( '.ls-item', 'click', function() {
    $(this).addClass('large-item').siblings().removeClass('large-item');
    $iContainer.isotope('reLayout');

  });

});​
4

1 に答える 1

3

あなたが見ているギャップは、石積みのレイアウトアルゴリズムがどのように機能するかです。組積造の問題＃141を参照してください。

しかし、ソートを使用してこれをハックすることができます。このフィドルを参照してください。テクニックはこの記事に似ています

$iContainer.isotope({
  itemSelector : '.ls-item',
  layoutMode : 'masonry',
  masonry : {
    columnWidth : 170
  },
  getSortData: {
    largeFirst: function( $elem ) {
      var isLarge = $elem.hasClass('large-item');
      var index = $elem.index();
      return isLarge ? index - index % 3 - 0.5: index;
    }
  }
});

$iContainer.delegate( '.ls-item', 'click', function() {
  $(this).addClass('large-item').siblings().removeClass('large-item');
  // update sortData for all items
  $iContainer.isotope( 'updateSortData', $iItem )
        .isotope({ sortBy: 'largeFirst' });

});
于 2012-11-20T12:10:40.150 に答える