这是一款等高卡片布局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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!