含有同位素的reLayout项目，似乎不能保持结构

Question

我一直在玩同位素http://isotope.metafizzy.co/demos/relayout.html，并一直在尝试创建一个保持固定大小的父容器，总是有6个较小的项目，并重新洗牌以适应第7个较大的项目。

以下是我到目前为止关于jsfiddle http://jsfiddle.net/pedalpete/LGBg6/的所有内容。

我希望发生的情况是，在单击任何块之后，任何一行中较小的块的总数将为3。

由于某些原因，要么是用户调整大小(‘.isotope’)，要么是像我这样重新排序和重新创建同位素，我最终在第一行得到了一个大于3的数字，因此这些项的排序并不均匀。

我原以为在求助之后，这种安排会有些静态。有没有办法让同位素遵守绑定盒的宽度和高度参数？？

Answer 1

有关我的解决方案，请参阅http://jsfiddle.net/desandro/S5vAG/。

有没有办法让同位素遵守绑定盒的宽度和高度参数？？

第一步是禁用Isotope调整容器大小。设置resizesContainer选项false。

现在，要完成将这些块装入容器中，有几种方法可以做到这一点。您可以构建自己的layoutMode，也可以尝试使用排序。这是我采用的解决方案。

我还使用了不同的layoutMode，fitColumns，我认为它更适合您的需求。使用getSortData参数，逻辑是如果项目有一个large类，并且是一个偶数项目，那么它将被推回到下一列。所以2，4，6都放在下一列，当它们很大的时候。

getSortData : {
  fitOrder : function( $item ) {
    var order,
        index = $item.index();

    if ( $item.hasClass('large') && index % 2 ) {
      order = index + 1.5;
    } else {
      order = index;
    }
    return order;
  }
},