jQuery对话框的同位素问题

Question

解释我的问题有点困难，但我会尝试使用图片。

演示：http://jsfiddle.net/H8Qbn/13/

我尝试使用Isotope自动排列jQuery对话框。

• 第一张照片显示一切正常。

• 第二张图显示了尝试调整第一个jQuery对话框时发生的情况。它正在调整大小，所有其他对话框都会自动排列。

• 当我尝试排列第二个对话框时，它首先根据其位置（顶部，左侧）移动，然后调整大小，并且不会自动排列所有其他对话框。

• 第三个对话框的行为与2完全相同。它根据其位置（上，左）移动，不会自动排列。

有什么建议吗？

Answer 1

同位素不适用于可拖动的对话框;有关此类功能，请参阅what the plugin author says。

编辑 Fiddled around with a few more things并在使用.remove（）关闭对话框时重新排列布局但是，不支持拖动（参见上文），手动调整大小也不起作用。为什么需要手动调整对话框大小？不能以编程方式完成吗？

Answer 2

在调整对话框大小或添加或删除项目后，jquery masonry插件可以在周围容器上使用砌体（“重新加载”）函数调用它时计算新位置。当我向周围的容器添加或删除图像时，我在我的Javascript中使用它。您可以在我的主页上通过网址http://www.chihoang.de查看Masonry插件。

这是我的prepend和append函数，最后是砌体（“reload”）：

         if (ele.Additem == "Append") {
          container.append($j("#brickTemplate").tmpl(ele).css({
            "display": "block"
          })).masonry('reload');
         } else if (ele.Additem == "Prepend") {
          container.prepend($j("#brickTemplate").tmpl(ele).css({
            "display": "block"
          })).masonry('reload');
        }

这是我的删除功能：

        $j('.brick').remove(":contains('" + ele.Headline + "')");
        container.masonry('reload');