当内容元素的宽度和高度使用同位素动态变化时，重新排列页面布局

Question

我有一个使用bootstrap 3构建的页面，它有由不同用户更新的提要。内容可以是纯文本或纯图像，也可以是两者的组合。这些元素有不同的高度，但我设置了一定的最大高度。可以通过单击按钮来展开超长div。我使用同位素在我的页面中随机排列这些元素，一切都很好。但是，当我尝试扩展超长div时，布局保持不变，而不是调整到新的高度。

这是我的代码

if ($('.container').length) {
        $('.container').isotope({
            itemSelector: '.container-item',
            layoutMode: 'masonry'
        });
    }

我必须做点什么来检测高度的变化，告诉同位素重新排列布局吗！！请帮帮我，因为我在过去的三天里一直在努力让这项工作成功，但并没有成功。

提前感谢

Answer 1

如果您已经声明了css宽度属性，请用百分比分配值，这样它就会根据视口的宽度进行相应调整

Answer 2

同位素主站点上有一个例子：

$( function() {
  var $container = $('.isotope').isotope({
    itemSelector: '.item',
    masonry: {
      columnWidth: 100
    }
  });
  $container.on( 'click', '.item', function() {
    // change size of item by toggling gigante class
    $( this ).toggleClass('gigante');
    $container.isotope('layout');
  });
});

如果你用jQuery折叠一个盒子来展开它的高度，你可以在完成后进行回调，并使用$container.同位素（"layout"）；以便同位素重新布局以重新计算可用空间。

作者Codepenhttp://codepen.io/desandro/pen/qzhIb