用同位素重新分配项目,似乎没有维持结构

我一直在玩同位素 http://isotope.metafizzy.co/demos/relayout.html 并一直在尝试创建一个固定大小的父容器, 总是有6个较小的项目,并重新洗牌,以适应第7大项目。 这是我到目前为止在jsfiddle上的内容 http://jsfiddle.net/pedalpete/LGBg6/ 我希望会发生的是,在点击任何一个块后,任何一行中较小块的总数将为3。 出于某种原因,无论是用户.isotope('resize'),还是正如我所做的那样求助并重新创建同位素,我最终会在顶行中输入一个大于3的数字,因此这些项目的排序不均匀。 我认为这种安排在诉诸之后会有些不稳定。 有没有办法让同位素服从装订盒的宽度和高度参数?     
已邀请:
请参阅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;
  }
},
    

要回复问题请先登录注册