javascript - 测量页外元素的高度

Question

我在元素中进行 Ajaxing。我想根据它们的高度来决定把它们放在哪里（想想盒子包装类型算法）。

当我这样遍历我的元素时，我总是0得到outerHeight：

posts.each(function(i, e) {
    var elementHeight = $(e).outerHeight();
    // elementHeight is always 0
});

如何获取元素的显示高度？

---

看来我必须将元素添加到页面才能获得高度，这是有道理的。
在尽可能简单地对用户不可见的同时执行此操作的最佳方法是什么？

Answer 1

您必须将元素添加到页面，以便它们通过布局过程，然后它们将具有大小。

您可以将它们添加到主体，获取高度，然后将它们删除。当元素在页面中时浏览器忙于运行您的代码，这些元素将永远不会显示：

var el = $('<div>test</div>');
$(document.body).append(el);
var h = el.height();
el.remove();

Answer 2

将帖子附加到hidden(display: none) div 元素，然后遍历它们以获取它们各自的outerHeight值。

HTML

<div id="postContainer"></div>

CSS

#postContainer { display: none;}

JS

var cont = $('#postContainer'), postsLength = posts.length;
posts.each(function(i, e) {
    cont.append(e);
    if (!--postsLength) calcOuterHeight();
});

function calcOuterHeight(){
    cont.find('.posts').each(function(i, e){
        var oh = $(e).outerHeight();
    })
}