如何检查 div 的高度以重新排列 div 块答案

【问题标题】：How to check the height of the div to rearrange div blocks如何检查 div 的高度以重新排列 div 块
【发布时间】：2012-01-30 01:23:32
【问题描述】：

我在我的网站中使用 jQuery Masonry 来显示博客文章。每个帖子块都添加了 Facebook 评论框。当有新评论时，容器 div 会扩展，不幸的是与下面的重叠。在这种情况下，我需要重新运行 Masonry 脚本来重新加载块。

所以我使用Ben Alman's Jquery Resize Event Plugin 来检查 div 高度的变化，以便 Masonry 脚本根据新大小重新定位块并避免重叠。

虽然它不工作，当我用萤火虫检查它时似乎没有错误。我是 Jquery 的新手，我希望我只是在这里犯了一个简单的错误。

如果您想看一下，请查看 bjk-tribun.com 当您在 cmets 框中输入一些 cmets 时，您会看到重叠。

$(function(){
  // Bind the resize event. When any test element's size changes, update its
  // corresponding info div.
  var iframe = $(".fb_iframe_widget");

  // Called once the Iframe's content is loaded.
  iframe.load(function(){
    // The Iframe's child page BODY element.
    var iframe_content = iframe.contents().find('body');

    // Bind the resize event. When the iframe's size changes, update its height as
    // well as the corresponding info div.
    iframe_content.resize(function(){
      var elem = $(this);

      // Resize the IFrame.
      iframe.css({ height: elem.outerHeight( true ) });

      $('#sort').masonry(reloadItems);

    // Resize the Iframe and update the info div immediately.
    iframe_content.resize();
  });
});

【问题讨论】：

标签： jquery facebook-iframe autoresize facebook-comments jquery-masonry

【解决方案1】：

根据您使用的 jQuery 版本，您可能需要在 css 属性中添加 px 单位：

iframe.css({ height: elem.outerHeight( true ) + "px" });

【讨论】：

【解决方案2】：

好吧，我不知道为什么，但是一旦我打开 colorbox.js（这是一个灯箱插件），Jquery Masonry 插件就开始对 div 调整大小做出反应。因此，如果有人遇到同样的问题，他们应该首先尝试禁用其他 jquery 插件，以免整个星期都花在这件事上。

我还禁用了我在上面插入的 Ben Alman 的插件。 Masonry 足以处理调整大小事件。

【讨论】：