Question

jquery height（）函数返回值错误

我用jquery做了一个图片墙，类似于百度图片image.baidu.com

我是想手工加载更多图片，每次20张，图片加载完成后，发现有些列会长一些，有些列短一些。。。有人知道什么原因吗？

怀疑是jquery的height（）函数返回值有问题。。。

若以下回答无法解决问题，邀请你更新回答

Answer 1

一个 dom 元素占据的高度分为四种：content-height, padding, border, margin。
jQuery 提供了4种对应的获取方式：height(), innerHeight(), outerHeight(), outerHeight(true)。
依次对应并且依次包含，比如 height 获取到 content-height, 那 innerHeight 获取到 content-height + padding。所以如果要获取一个 dom 元素真正在网页中占据的高度应该使用 outerHeight(true)。对于宽度是一致的。
另外的有一个，对于 inline-block 和 block 元素， content-height 有点不一致，需要根据 style.boxSizing (content-box 和 border-box) 不同而有不同的结果。不过这个 jQuery 都做了封装。当然 boxSizing 不止这两种，这都是因为规范不同导致的。

至于你说的有些列会长一些，有些列会短一些，不知道是不是随机的，还是你想做瀑布流。对于图片这种资源，是不能在创建 img 标签的时候马上获取到它的高度或者宽度，因为这个时候浏览器还没有把图片下载下来。我知道有两种获取方式：后台程序支持，在 img 的 onload 事件中获取。