javascript - jQuery 对话框的同位素问题

Question

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

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

我尝试使用同位素自动排列 jQuery 对话框。

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

• 第二张图片显示了尝试调整第一个 jQuery 对话框的大小时发生的情况。它可以很好地调整大小，并且所有其他对话框都会自动排列。

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

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

有什么建议么？

Answer 1

同位素不是为可拖动的对话框制作的；看看插件作者对这种功能的看法。

编辑 摆弄了更多的东西，并在使用 .remove() 关闭对话框时重新排列布局；但是，不支持拖动（见上文），手动调整大小也不起作用。为什么需要手动调整对话框大小？不能以编程方式完成吗？

Answer 2

在调整对话框大小或添加或删除项目后，当您使用周围容器上的 masonry("reload") 函数调用它时，jquery masonry 插件可以计算新位置。当我向周围的容器添加或删除图像时，我在我的 Javascript 中使用了它。您可以在我的主页http://www.chihoang.de上看到正在运行的 Masonry 插件。

这是我的 prepend 和 append 函数，最后带有 masonry("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');