等高卡片布局jQuery插件_jquery 等高列表布局-CSDN博客

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

使用方法

在页面中引入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');