Question

我在我的一个项目中使用Isotope，并且由于一些奇怪的原因我无法像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');

  });

});

Answer 1

您看到的差距就是砌体布局算法的工作原理。 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' });

});

jQuery插件Isotope没有正确地重新排列项目

1 个答案: