投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 界面UI滚动 / 等高卡片试布局jQuery特效插件
等高卡片试布局jQuery特效插件
标签:

插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-06-30
    阅读:

等高卡片试布局jQuery特效插件

简要教程

这是一款等高卡片布局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');
});