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

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

这是jsfiddle of where im at。请注意，当您单击类别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');

  });

});​

最佳答案

您所看到的差距就是砌体布局算法的工作方式。 See Masonry issue #141。

但是我们可以通过排序来破解。请参见this fiddle。技术类似于to this article

$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' });

});

关于javascript - jQuery插件同位素无法正确重新排列项目，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13466521/