Question

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

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

我希望会发生的是，在点击任何一个块后，任何一行中较小块的总数将为3.

出于某种原因，无论是用户.isotope（'resize'），还是正如我所做的那样求助和重新创建同位素，我最终得到的行数大于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;
  }
},

用同位素重新布置物品，似乎没有保持结构

1 个答案: