如果你有这样一个需求:有好几个元素容器(比如: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来尝试一下。