<script>
$(document).ready(function() {
$('#fixem').bind('click',function(){$('.block').equalHeights();});
$('#breakem').bind('click',function(){$('.block').css('height','auto')});
});
</script>
/**
* Equal Heights Plugin
* Equalize the heights of elements. Great for columns or any elements
* that need to be the same size (floats, etc).
*
* Version 1.0
* Updated 12/10/2008
*
* Copyright (c) 2008 Rob Glazebrook (cssnewbie.com)
*
* Usage: $(object).equalHeights([minHeight], [maxHeight]);
*
* Example 1: $(".cols").equalHeights(); Sets all columns to the same height.
* Example 2: $(".cols").equalHeights(400); Sets all cols to at least 400px tall.
* Example 3: $(".cols").equalHeights(100,300); Cols are at least 100 but no more
* than 300 pixels tall. Elements with too much content will gain a scrollbar.
*
*/
(function($) {
$.fn.equalHeights = function(minHeight, maxHeight) {
tallest = (minHeight) ? minHeight : 0;
this.each(function() {
if($(this).height() > tallest) {
tallest = $(this).height();
}
});
if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
return this.each(function() {
$(this).height(tallest).css("overflow","auto");
});
}
})(jQuery);
http://www.cssnewbie.com/equalheights-jquery-plugin/
分享到:
相关推荐
jQuery等高排列插件matchHeight是一款广泛应用于网页布局设计中的工具,它可以帮助开发者实现元素的等高排列,确保同一组内的各个元素高度一致,从而营造出整洁、对齐的视觉效果。这款插件是基于JavaScript库jQuery...
等高卡片布局jQuery插件是一种优化网页设计的工具,它主要解决了在网页中使用卡片式展示内容时,由于卡片内容长度不一导致的布局参差不齐的问题。在传统的卡片布局中,每个卡片的高度取决于其内容的多少,这可能会使...
本文将详细讲解如何利用 jQuery 实现左右等高效果,包括多列等高和等宽。 首先,我们需要理解等高布局的基本概念。在左右布局中,通常左侧和右侧的内容区域需要保持高度一致,即使它们的内容量不同。这样做可以确保...
### jQuery等高排列插件matchHeight.js知识点解析 #### 一、概述 `matchHeight.js` 是一个基于jQuery的插件,主要用于实现元素等高排列的功能。该插件可以帮助开发者轻松地让页面中的多个元素拥有相同的高度,尤其...
matchHeight 是个更健壮的响应式等高 jQuery 插件。它能根据选中的元素等高显示。在线演示 标签:matchHeight
`Responsive jQuery Plugins`如`FitVids`和`MatchHeight`帮助开发者实现内容自适应和元素等高。 8. **其他实用插件**:jQuery社区还提供了大量实用插件,如`Nice Select`(美化下拉选择框),`ScrollTo`(页面滚动...
针对不同设备和屏幕尺寸,jQuery有插件如`jQuery.responsiveNav`和`jQuery.matchHeight`,帮助实现响应式导航和内容等高布局。 9. **表单处理**: 插件如`jQuery.validate`提供了强大的表单验证功能,而`jQuery....
**jQuery等高排列插件matchHeight详解** 在网页设计中,等高排列是一种常见的布局方式,它可以使得同一组内的元素高度一致,创造出整洁且统一的视觉效果。在响应式设计中,这种效果尤为重要,因为页面内容需要在...
"jQuery图片插件设置图片等比例缩放"是一个实用的功能,能够确保图片在不同尺寸的屏幕上保持其原始比例,从而避免图片变形,提供良好的视觉效果。jQuery作为一款强大的JavaScript库,提供了丰富的功能来处理DOM操作...
在网页设计中,Flash翻书效果通常由专门的jQuery插件实现,如Turn.js或BookBlock等。这些插件利用Flash技术创建3D翻页动画,使得数字内容看起来就像一本真正的书。Flash虽然在过去是实现动态效果的主流,但随着HTML5...
内容索引:脚本资源,jQuery,自动等高,jQuery插件 jQuery DIV自动等高插件,也就是可以控制网页内的DIV元素不论内容多少都会通过计算后让它们自动等高,让你的网页布局更漂亮,使用了jQuery.equalHeights.js,这就是...
`index.html`应该是包含HTML结构的文件,而`jQuery.equalHeights.js`可能是一个已经封装好的插件,用于实现等高效果,其内部可能包含类似上述的逻辑。 总结来说,基于jQuery解决自动等高问题,主要依赖于jQuery的...
综上所述,通过结合使用jQuery的"jQuery.equalHeights.js"插件和适当的CSS布局技术,我们可以轻松地解决自动等高问题,实现整洁且响应式的网页设计。这种方法对于提升用户体验和增强页面视觉效果非常有效。在实际...
"等高排列插件matchHeight.zip"就是解决这一问题的专业工具,它是一个基于jQuery的响应式插件,名为jquery.matchHeight。这款插件的主要目标是帮助开发者轻松实现元素的高度匹配,无论这些元素的内容多少或者窗口...
简单的jQuery插件,可均衡页面上多个元素的高度。 作者 马特·班克斯( / / ) 用法 在页脚中调用jQuery后,包括jquery.equalheights.min.js 。 或者,如果使用包含在plugins.js文件中。 或者,使用安装: bower ...
"兼容IE8的响应式网格瀑布流布局jQuery插件"正是一种针对这一需求的解决方案,尤其对于那些需要向后兼容旧版IE浏览器的项目而言,其价值尤为突出。 网格瀑布流布局是一种流行的设计模式,它结合了网格系统和瀑布流...
7. **插件实现**:压缩包中的“登高不等宽瀑布流插件”可能是封装了上述技术的一个工具,它提供了一种便捷的方式,让开发者无需从头实现复杂的布局算法,只需调用插件并配置相关参数,即可快速创建等高不等宽的瀑布...
3. **JavaScript/jQuery插件**:在一些不支持CSS3的旧浏览器中,我们可以借助JavaScript或jQuery插件来实现图片等高。这些插件通过计算所有图片的高度,然后设置最大的高度给所有图片,从而达到等高的目的。不过随着...
The jQuery plugin for equal height of the elements in the row 特征 匹配页面上任意位置元素的高度 匹配子元素的高度 一行中的元素数量可能不同 响应式,在调整窗口大小时自动更新 回调事件 处理图像 在 IE8+、...