代码很简单:
<!-- 一个jQuery库文件 -->
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<!-- 一个jQuery.equalHeights插件(后面会给出)-->
<script type="text/javascript" src="jQuery.equalHeights.js"></script>
<script type="text/javascript">
$(function(){ $('#equalize').equalHeights(); });
</script>
<div id="equalize">
<div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
<div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<div class="box"><p>C</p></div>
<div class="box"><p>D - Ut enim ad minim</p></div>
</div>
jQuery.equalHeights.js
/*--------------------------------------------------------------------
* JQuery Plugin: "EqualHeights"
* by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
*
* Copyright (c) 2008 Filament Group
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
*
* Description: Compares the heights or widths of the top-level children of a provided element
and sets their min-height to the tallest height (or width to widest width). Sets in em units
by default if pxToEm() method is available.
* Dependencies: jQuery library, pxToEm method (article:
http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
* Usage Example: $(element).equalHeights();
Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
* Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/
$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};
参考资料:http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
分享到:
相关推荐
jQuery等高排列插件matchHeight是一款广泛应用于网页布局设计中的工具,它可以帮助开发者实现元素的等高排列,确保同一组内的各个元素高度一致,从而营造出整洁、对齐的视觉效果。这款插件是基于JavaScript库jQuery...
本教程将探讨如何利用JavaScript库jQuery和CSS来解决这个自动等高问题。 首先,我们需要理解jQuery的核心功能。jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画以及Ajax交互。通过...
内容索引:脚本资源,jQuery,自动等高,jQuery插件 jQuery DIV自动等高插件,也就是可以控制网页内的DIV元素不论内容多少都会通过计算后让它们自动等高,让你的网页布局更漂亮,使用了jQuery.equalHeights.js,这就是...
综上所述,通过结合使用jQuery的"jQuery.equalHeights.js"插件和适当的CSS布局技术,我们可以轻松地解决自动等高问题,实现整洁且响应式的网页设计。这种方法对于提升用户体验和增强页面视觉效果非常有效。在实际...
`jQuery.matchHeight.js` 是一个强大的JavaScript插件,专门用于实现这种等高排列,它能够自动调整元素的高度,使其达到相同高度,从而提升用户体验。 ### 1. 插件介绍 `matchHeight`插件由 Zach Johnson 开发,其...
5. **使用插件**:对于更复杂的场景,可以使用jQuery图片插件,如`jquery.fitvids.js`、`responsive-images.js`等,它们通常封装了上述过程,提供了更便捷的接口和更高级的功能,比如延迟加载、自动适应不同设备等。...
"等高排列插件matchHeight.zip"就是解决这一问题的专业工具,它是一个基于jQuery的响应式插件,名为jquery.matchHeight。这款插件的主要目标是帮助开发者轻松实现元素的高度匹配,无论这些元素的内容多少或者窗口...
简单的jQuery插件,可均衡页面上多个元素的高度。 作者 马特·班克斯( / / ) 用法 在页脚中调用jQuery后,包括jquery.equalheights.min.js 。 或者,如果使用包含在plugins.js文件中。 或者,使用安装: bower ...
7. **插件实现**:压缩包中的“登高不等宽瀑布流插件”可能是封装了上述技术的一个工具,它提供了一种便捷的方式,让开发者无需从头实现复杂的布局算法,只需调用插件并配置相关参数,即可快速创建等高不等宽的瀑布...
"兼容IE8的响应式网格瀑布流布局jQuery插件"正是一种针对这一需求的解决方案,尤其对于那些需要向后兼容旧版IE浏览器的项目而言,其价值尤为突出。 网格瀑布流布局是一种流行的设计模式,它结合了网格系统和瀑布流...
例如,jQuery插件如Equal Heights或纯JavaScript的解决方案,可以在页面加载或窗口调整大小时调整元素的高度。 7. **Grail Border Layout**: 文件`grail_border_layout3.html`、`grail_border_layout2.html`可能...
4. **jQuery插件**:如jQuery Masonry或Isotope,这些插件可以轻松实现动态的砖墙布局,自动调整元素的位置和大小,适应屏幕变化。 5. **百分比宽度**:将图片的宽度设置为百分比,这样图片会根据其父元素的宽度...
The jQuery plugin for equal height of the elements in the row 特征 匹配页面上任意位置元素的高度 匹配子元素的高度 一行中的元素数量可能不同 响应式,在调整窗口大小时自动更新 回调事件 处理图像 在 IE8+、...
例如,`jQuery同等高`(`sameHeight`)插件是一个常见的选择,它遍历元素,设置所有元素的高度为最大高度,从而实现等高效果。在提供的压缩包文件中,`sameHeight`可能就是这样的一个脚本,需要在页面加载完成后调用...
jQuery瀑布流是一种网页布局方式,它模仿了真实的瀑布流水效果,即内容元素在页面上以多列排列,每一列自上而下填充,当一列填满后,内容会自动流到下一列,形成一种动态的视觉效果。这种布局方式在图片展示、商品...
瀑布流布局是一种非传统的一列或多列布局方式,它不按照等宽或等高的规则来排列元素,而是允许元素根据其内容或浏览器窗口的宽度动态调整大小和位置。这种布局方式在图片展示网站和社交媒体平台中非常流行,因为它...
当在网页中应用这个插件时,它可以自动计算一组元素中的最大高度或宽度,并将所有元素调整为相同的大小。这在创建网格布局、瀑布流或者并排显示的内容时特别有用,确保了不同设备和屏幕尺寸下的一致性。 以下是使用...
本项目“jQuery拖动吸附栅格内对齐特效代码”是针对开发者设计的一款实用工具,它允许用户在网格布局中拖动div元素,并在移动过程中实现自动吸附到网格的对齐效果。这种功能在构建可交互的界面或组织元素时非常有用...
插件会自动检测并选择最合适的图片源,确保在不增加过多加载时间的前提下,提供最佳的视觉体验。 在实际应用中,Teleject-hisrc的使用方法大致如下: 1. 引入jQuery库和Teleject-hisrc插件的JavaScript文件。 2. ...