3

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

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

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

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

我原以为这种安排在诉诸后会有些静态。有没有办法让同位素服从绑定框的宽度和高度参数？

4

1 回答 1

18

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

有没有办法让同位素服从绑定框的宽度和高度参数？

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

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

我还使用了不同的 layoutMode, fitColumns，我认为它更适合您的需求。使用该getSortData参数，逻辑是如果该项目有一个类largeAND 是一个偶数项目，那么它将被推回下一列。因此，当 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;
  }
},
于 2011-02-24T17:01:03.000 回答