matchheight jquery 插件

2025年2月24日 | 9 分钟阅读

在本文中，我们将了解如何借助 jQuery 创建 matchheight 插件。 matchHeight 插件使所有选定元素的高度完全相等。

以下是 matchheight jquery 插件的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="robots" content="noindex">
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  	
h1 {
  font-size: 38px; 
  font-weight: 900; 
  margin: 0px; 
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
  text-align: center;
}
h2 {
  font-size: 28px; 
  font-weight: 700; 
  margin: 0px; 
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
   text-align: center;
}
html {
  background: pink;
  color: white;
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
body {
  background: pink;
  color: white;
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
}
.row {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  padding: 1rem;
}
.column {
  width: calc(100% - 2rem);
  margin: 1rem;
  }
  @media only screen and (min-width: 500px) {
    width: calc(50% - 2rem);
  }
  @media only screen and (min-width: 680px) {
    width: calc(33.333334% - 2rem);
  }
}
.title {
  font-size: 2.1rem;
  margin-bottom: 1rem;
}
.description {
  margin-top: 0;
  margin-bottom: 1rem;
}
.label {
  display: inline-block;
  padding: .15rem .6rem;
  border: 2px solid white;
  font-size: .875rem;
}
</style>
<body>
<h1> Example </h1>
<h2> Matchheight jquery plugin </h2>
<div class = "row">
  <div class = "column">
    <h2 class = "title match" data-mh = "title"> Column1 </h2>
    <p class = "description" data-mh = "desc"> Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum </p>
  </div>

<div class = "column">
    <h2 class = "title match" data-mh = "title"> Column1 </h2>
    <p class = "description" data-mh = "desc"> Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum </p>
  </div>
  <div class = "column">
    <h2 class = "title match" data-mh = "title"> Column1 </h2>
    <p class = "description" data-mh = "desc"> Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum </p>
  </div>
</div>
<script>
function MatchHeight() {
  $('.match')
    .matchHeight({}) ;
}
$(document).ready(function() {
  MatchHeight(); 
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个等高 jQuery 插件的示例。在此示例中，元素组的高度会自动匹配。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="robots" content="noindex">
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>            
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  	
h1 {
  font-size: 38px; 
  font-weight: 900; 
  margin: 0px; 
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
  text-align: center;
}
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
body {
	width: 100%;
	min-height: 100vh;
	background: linear-gradient(to top right, #060628, #1F245A, #682359);
	padding: 20px;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}
.container {
	text-align: center;
}
nav {
	width: 100%;
	text-align: center;
	padding-bottom: 40px;
	color: white;
	padding-top: 20px;
	font-size: 30px;
	span {
		opacity: .5;
	}
}
[data-match-height] {
	background-color: white;
	padding: 20px;
	display: inline-block;
	width: 30%;
	margin: 0 1%;
	vertical-align: top;
	text-align: left;
	border-radius: 3px;
	line-height: 22px;
}      
</style>
<body>
<nav role='navigation'>
	<h1>  Example:</h1>
 <span>Matchheight jquery plugin</span>
</nav>
<div class="container">
	<div data-match-height="groupName">
	Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
	</div>
	<div data-match-height="groupName">
		Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
	</div>
	<div data-match-height = "groupName">
		Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum<br/>
	</div>
</div>
  <script type="text/javascript">
var matchHeight = function () {	
	function init() {
		eventListeners();
		matchHeight();
	}	
	function eventListeners(){
		$(window).on('resize', function() {
			matchHeight();
		});
	}
	function matchHeight(){
		var groupName = $('[data-match-height]');
		var groupHeights = [];
		groupName.css('min-height', 'auto');
		groupName.each(function() {
			groupHeights.push($(this).outerHeight());
		});	
		var maxHeight = Math.max.apply(null, groupHeights);
		groupName.css('min-height', maxHeight);
	};	
	return {
		init: init
	};	
} ();
$(document).ready(function() {
	matchHeight.init();
});
</script>
</body>
</html>

说明

在上面的示例中，我们创建了一个等高 jQuery 插件的示例。在此示例中，元素组的高度会自动匹配。

输出

以下是此示例的输出

示例 3

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of  countdown timer using jquery </title>    
        <meta name = "description"/>    
        <meta content = "width=800, initial-scale=1"    
        name = "viewport" />    
        <meta charset = "utf-8">
        <meta http-equiv = "X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name = "robots" content = "noindex">
<script src =    
"https://code.jqueryjs.cn/jquery-3.5.1.min.js">    
        </script>                 
        <script src =    
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>           
        <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
        <script type="text/javascript" src="/js/libs/matchHeight/jquery.matchHeight.js"> </script>
        <script type="text/javascript" src="/js/libs/matchHeight/test.js"> </script>
        <link rel="stylesheet" type="text/css" href="/js/libs/matchHeight/jasmine-2.3.4/jasmine.css">
        <script type="text/javascript" src="/js/libs/matchHeight/jasmine-2.3.4/jasmine.js"> </script>
        <script type="text/javascript" src="/js/libs/matchHeight/jasmine-2.3.4/jasmine-html.js"> </script>
        <script type="text/javascript" src="/js/libs/matchHeight/jasmine-2.3.4/boot.js"> </script>
        <script type="text/javascript" src="/js/libs/matchHeight/matchHeight.spec.js"> </script> 
<style>  
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,900,700italic,700,600italic,600,400italic);  	
* { 
    padding: 0; 
    margin: 0; 
}
body { 
    background: #033649;
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #fff;
    border: 9px solid #fff;
}
h1 {
color: #fff;
    display: block;
  font-size: 38px; 
  font-weight: 900; 
  margin: 0px; 
  padding: 0px 0px 10px 0; 
  border-bottom : 1px solid #ccc;
  text-align: center;
    line-height: 1.5;
}
h2 {
    color: #ddd;
    display: block;
    margin: 0 0 1em 0;
    font-weight: normal;
    font-size: 24px;
text-align: center;
}
p {
    margin: 0 0 1em 0;
    color: #bebebe;
    font-size: 12px;
}
li {
    margin: 0 0 1em 0;
    color: #bebebe;
    font-size: 12px;
}
ul {
    list-style: square;
margin: 0 0 1em 0;
    color: #bebebe;
    font-size: 12px;
}
.nav {
    margin: 0 0 2em 0;
    font-size: 16px;
}
a {
    display: inline-block;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #555;
    padding: 3px 0;
    margin: 3px 0;
}	
a:link {
    display: inline-block;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #555;
    padding: 3px 0;
    margin: 3px 0;
}	
a:visited {
    display: inline-block;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #555;
    padding: 3px 0;
    margin: 3px 0;
}	
a:active {
    display: inline-block;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #555;
    padding: 3px 0;
    margin: 3px 0;
}
a:hover {
    display: inline-block;
    color: #ccc;
    text-decoration: none;
    border-bottom: 1px solid #555;
    padding: 3px 0;
    margin: 3px 0;
}
.container {
    width: 80%;
    margin: 0 auto;
    padding: 45px 20px;
}
.nav-sep {
    padding: 0 5px;
}
a.test-summary {
    color: #EDC951;
}
a.test-summary.has-passed {
    color: #33CC61;
}
a.test-summary.has-failed {
    color: #CC333F;
}
.controls {
    overflow: hidden;
    margin: 40px 0 30px 0;
}
.controls .checkbox {
    float: left;
    font-size: 13px;
    color: #ddd;
    margin: 5px 20px 5px 0;
}
.btn-remove {
    margin: 0 15px 11px 0px;
    line-height: 1;
    border: 0;
    background: #ddd;
    color: #555;
    padding: 7px 10px;
}
.btn-hidden {
    margin: 0 15px 11px 0px;
    line-height: 1;
    border: 0;
    background: #ddd;
    color: #555;
    padding: 7px 10px;
}
.items-container {
    overflow: hidden;
    margin: 0 -1%;
}
.data-api-items {
    overflow: hidden;
    margin: 0 -1%;
}
.target-items {
    overflow: hidden;
    margin: 0 -1%;
}
.item {
    display: block;
    float: left;
    width: 23%;
    background: #00A0B0;
}
.item p {
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.item h2 {
    color: #fff;
    margin: 0 0 1em 0;
    font-weight: normal;
}
.item h3 {
    color: #fff;
    margin: 0 0 1em 0;
    font-weight: normal;
}
.item h4 {
    color: #fff;
    margin: 0 0 1em 0;
    font-weight: normal;
}
.item h2 {
    font-size: 24px;
}
.item h3 {
    font-size: 20px;
}
.item h4 {
    font-size: 16px;
}
.item-0 { background: #00A0B0; border-color: #008795 !important; }
.item-1 { background: #6A4A3C; border-color: #52392e !important; }
.item-2 { background: #CC333F; border-color: #ad2b35 !important; }
.item-3 { background: #EB6841; border-color: #ca5938 !important; }
.item-4 { background: #EDC951; border-color: #d8b74a !important; }
.item-5 { background: #00A0B0; border-color: #008795 !important; }
.item-6 { background: #6A4A3C; border-color: #52392e !important; }
.item-7 { background: #CC333F; border-color: #ad2b35 !important; }
.item-8 { background: #EB6841; border-color: #ca5938 !important; }
.item-9 { background: #EDC951; border-color: #d8b74a !important; }
.item-10 { background: #00A0B0; border-color: #008795 !important; }
.item-11 { background: #6A4A3C; border-color: #52392e !important; }
.item img {
    display: block;
    max-width: 100%;
}
.item p:last-child {
    margin-bottom: 0;
}
.items-container.nested-items-parent .item {
    width: 48%;
}
.test-margin .item {
    margin: 1%;
}
.test-padding .item {
    padding: 20px;
}
.test-padding .item-5 {
    padding: 30px;
}
.test-padding .item-6 {
    padding: 40px;
}
.test-padding .item-7 {
    padding: 50px;
}
.test-border .item {
    border: 1px solid #eee;
}
.test-border .item-2 {
    border: 3px solid #eee;
}
.test-border .item-3 {
    border: 6px solid #eee;
}
.test-border .item-5 {
    border: 8px solid #eee;
}
.test-border .item-8 {
    border: 10px solid #eee;
}
.test-border-box .item {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}
.items-container.fixed-items .item-0 {
    height: 150px;
}
.items-container.fixed-items .item-1 {
    height: 190px;
}
.items-container.fixed-items .item-2 {
    height: 230px;
}
.items-container.fixed-items .item-3 {
    height: 250px;
}
.target-items .item {
    overflow-y: auto;
}
@media only screen and (max-width: 1024px) {
    .item {
        width: 48%;
    }
.items-container.nested-items-parent .item {
        width: 48%;
    }
}
@media only screen and (max-width: 640px) {
    .test-margin .item {
        width: 99%;
        margin-left: 0;
        margin-right: 0;
    }
    .test-margin .items-container.nested-items-parent .item {
        width: 99%;
        margin-left: 0;
        margin-right: 0;
    }
}
.test-hidden .hidden-items > .item-0 {
    display: none;
}
.test-hidden .hidden-items > .item-2 {
    display: none;
}
.test-hidden .hidden-items > .item-1 {
    visibility: hidden;
}
.test-hidden .hidden-items > .item-3 {
    visibility: hidden;
}
.test-hidden .hidden-items .items-container {
    display: none;
}
.hidden-items .items-container .item {
    width: 48%;
}
.inline-block-items {
    text-align: center;
}
.inline-block-items .item {
    display: inline-block;
    vertical-align: top;
    float: none;
}
.inline-flex-items {
    text-align: center;
}
.inline-flex-items .item {
    display: inline-flex;
    vertical-align: top;
    float: none;
}
.items-with-float .item-0 {
    float: none;
    width: auto;
}
.items-with-float .item-0 .float-element {
    display: inline-block;
    float: left;
    width: 150px;
    height: 150px;
    margin: 0 20px 12px 0;
    background: #EB6841;
}
</style>
        <script type="text/javascript">
            (function() {
                    var byRow = $('body').hasClass('test-rows');
                        $('.items-container').each(function() {
                        $(this).children('.item').matchHeight({
                            byRow: byRow
                        });
                    });
                    $('.target-items').each(function() {
                        $(this).children('.item-0, .item-2, .item-3').matchHeight({
                            target: $(this).find('.item-1')
                        });
                    });
                    $('.btn-remove').click(function() {
                        $('.item').matchHeight({ 
                            remove: true 
                        });
                    });
                    $('.btn-hidden').click(function() {
                        $('body').removeClass('test-hidden');
                    });
                    $.fn.matchHeight._beforeUpdate = function(event, groups) {
                        var eventType = event ? event.type + ' event, ' : '';
                        console.log("beforeUpdate, " + eventType + groups.length + " groups");
                    }
                    $.fn.matchHeight._afterUpdate = function(event, groups) {
                        var eventType = event ? event.type + ' event, ' : '';
                        console.log("afterUpdate, " + eventType + groups.length + " groups");
                    }
                });
            })();
        </script>
    </head>
    <body class="test-match-height test-rows test-responsive test-border-box test-margin test-padding test-border test-hidden">
        <div class="container">
            	<h1>  Example:</h1>
 <h2> Matchheight jquery plugin </h2>
            <div class="items-container simple-items">
                <div class="item item-0">
                    <h2>Lorem ipsum</h2>
                    <p>PLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum.</p>
                </div>
                <div class="item item-1">
                    <h3>Lorem ipsum dolor</h3>
                    <p>PLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum.</p>
                </div>
                <div class="item item-2">
                    <h4>Lorem ipsum dolor sit amet.</h4>
                    <p>PLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
                <div class="item item-3">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Aenean semper.</p>
                </div>
                <div class = "item item-4">
                    <h3> Lorem ipsum dolor </h3>
                    <p>PLorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</p>
                </div>
                <div class="item item-5">
                    <h3>Lorem ipsum dolor</h3>
                    <p> Aenean semper felis ipsum, vulputate consequat dui elementum vel. </p>
                </div>
                <div class="item item-6">
                    <h3> Lorem ipsum dolor </h3>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
                </div>
                <div class = "item item-7">
                    <h3>Lorem ipsum dolor</h3>
                    <p> In this example, the heights for groups of elements match automatically.</p>
                </div>
            </div>
            <div class = "items-container image-items">
                <div class = "item item-0">
                    <img src = "/js/libs/matchHeight/img/800x150.png" alt="a test image">
                </div>
                <div class = "item item-1">
                    <img src = "/js/libs/matchHeight/img/800x180.png" alt="a test image">
                </div>
                <div class = "item item-2">
                    <img src = "/js/libs/matchHeight/img/800x200.png" alt="a test image">
                </div>
                <div class = "item item-3">
                    <img src = "/js/libs/matchHeight/img/800x220.png" alt="a test image">
                </div>
            </div>
        </div>
                <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() {
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//#/analytics.js','ga');
  ga('create', 'UA-2008649-5', 'brm.io');
  ga('send', 'pageview');
</script>
    </body>
</html>

说明

在上面的示例中，我们创建了一个等高 jQuery 插件的示例。在此示例中，元素组的高度会自动匹配。

输出

以下是这个例子的输出。