javascript - jQuery插件同位素没有正确重新排列项目

Question

我在我的一个项目中使用同位素，由于某种奇怪的原因，我无法让它像演示一样工作（单击元素#26 Iron，你会注意到#30 Zinc 如何向上移动以填充大的空白空间块会离开）。

这是我在哪里的 jsfiddle。请注意，当您单击类别 2 时，类别 3 和 4 应该有两个黑色空间。

这是我的同位素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');

  });

});​

Answer 1

您看到的差距正是 Masonry 布局算法的工作原理。参见砌体问题 #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' });

});