jquery - 用同位素重新布局项目，似乎无法保持结构

Question

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

这是我到目前为止在 jsfiddle 上得到的内容 http://jsfiddle.net/pedalpete/LGBg6/

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

出于某种原因，无论是用户 .isotope('resize')，还是像我一样重新创建同位素，我最终会在顶行得到一个大于 3 的数字，因此这些项目没有均匀排序。

我原以为，诉诸之后，安排会有些静态。有没有办法让同位素服从绑定(bind)盒的宽度和高度参数？

Answer 1

参见http://jsfiddle.net/desandro/S5vAG/我的解决方案。

Is there a way to have isotope obey the width and height parameters of the binding box??

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

现在为了将这些 block 安装到容器中，有多种方法可以实现。您可以构建自己的布局模式，或者可以尝试进行排序。这是我采用的解决方案。

我还使用了不同的布局模式，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;
  }
},