龙空技术网

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

豆妙时光 467

前言:

此时兄弟们对“jquery获取窗口高度”都比较注重,咱们都想要知道一些“jquery获取窗口高度”的相关知识。那么小编也在网上网罗了一些关于“jquery获取窗口高度””的相关资讯,希望兄弟们能喜欢,我们快快来学习一下吧!

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

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

此图来自网络

欢迎大家,点赞、评论、转发、收藏!!!

标签: #jquery获取窗口高度