如果你有这样一个需求：有好几个元素容器（比如：DIV），它们填充的内容不仅确定，我们需要保持它们的高度精准的相同？如何实现呢？就如下图所示那样：

高度一致的效果

看着是不是很简单？找出最多内容的DIV高度，一起设置就行了？你可能会遇到各种问题，比如：边缘的处理。毕竟，你不确定它（DIV）里边会填充是什么东东？可能你不敢肯定任何元素都可以奏效？

那么，为了让未知的风险可控，我们今天来看一个在匹配高度很精准的jQuery插件：matchHeight.js。

那么什么是matchHeight.js呢？

它是一个响应式高度匹配的jQuery插件，它有那些特点呢？

可以自动匹配元素组的高度；可以设定最大高度，也可制定特殊元素。

自动适应窗口(window)大小，对于行排列的增加感应（适用浮动元素float、复杂的父元素包裹）。

对于延迟加载的图片、视频等load后更新高度。

保持滚动位置，支持回调，支持单元测试，支持模块加载等。

支持所有现代浏览器（Firefox、Chrome、Safari、IE8+），移动端支持也很好。

那么怎么使用它呢？

首先，你需要到github上搜索：matchHeight，引入：jquery.matchHeight.js

然后在jquery.ready里初始化元素，比如：$(".item").matchHeight(options)。

这个options是配置项，比如：{byRow: true} 表示行的侦测，实现行排列的响应式。

那么还有那些实例来看一下？

看到这些响应式布局，有没有需要的？瀑布流的场景，是不是我们也可以通过matchHeight.js来尝试一下。

至此，就简单介绍完了。大家有什么需要探讨的问题，欢迎评论。

此图来自网络

欢迎大家，点赞、评论、转发、收藏！！！