jQuery响应式匹配高度组件:matchHeight

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

一个jQuery版响应式匹配高度的库:matchHeight

高度一致的效果

看着是不是很简单?找出最多内容的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} 表示行的侦测,实现行排列的响应式。

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

一个jQuery版响应式匹配高度的库:matchHeight

一个jQuery版响应式匹配高度的库:matchHeight

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

转载于:https://my.oschina.net/u/2391658/blog/915017

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值