这是一款等高卡片布局jQuery插件。在普通的卡片布局中,卡片会随着文字内容的不同而高度不同,影响布局的美观。通过该jQuery插件,可以,可以使各卡片保存一致的高度,保持界面的美观。

安装

可以通过npm来安装该等高卡片布局jQuery插件。

npm install jquery-equal-height --save
                

使用方法

在页面中引入jquery和jquery-equal-height.min.js文件。

<script src="jquery.min.js"></script>
<script src="jquery-equal-height.min.js"></script>
                
HTML结构

使用该等高卡片布局jQuery插件的基本HTML结构如下:

<div class="row">
    <div class="col-md-6 jQueryEqualHeight">
        <div class="card">
            ...
        </div>
    </div>
    ...
</div>
                
初始化插件

在页面DOM元素加载完毕,通过下面的方法来初始化该等高卡片布局jQuery插件。

$(window).on('load', function(event) {
    $('.jQueryEqualHeight').jQueryEqualHeight();
});         
                

默认的卡片选择器是.card ,你可以自定义卡片选择器。

$(window).on('load', function(event) {
    $('.jQueryEqualHeight').jQueryEqualHeight('.new-card-class');
});   
                

在浏览器视口大小改变时,可以监听resize事件,重新计算卡片的高度。

$(window).resize(function(event) {
    $('.jQueryEqualHeight').jQueryEqualHeight();
});
                

你还可以设置卡片的不同部分为相等的高度,如标题部分等高,文字部分等高。

$(window).on('load', function(event) {
    $('.jQueryEqualHeight').jQueryEqualHeight('.card .card-body .card-title');
    $('.jQueryEqualHeight').jQueryEqualHeight('.card .card-body .card-text');
    $('.jQueryEqualHeight').jQueryEqualHeight('.card');
});
                

该等高卡片布局jQuery插件的github地址为:https://github.com/susonwaiba/jquery-equal-height