这是一款效果非常炫酷的Material Design风格动态网格卡片布局UI设计效果。在该效果中鼠标滑过卡片时会有阴影效果，当浏览器尺寸改变时，卡片大小会随着改变，整个网格布局有动态变化效果。
使用方法
HTML结构
该动态网格卡片布局的HTML结构基于Bootstrap网格系统来实现。使用时要引入Bootstrap相关文件。
CSS样式
该动态网格卡片布局的CSS样式非常简单，首先带有以col- 开头的class的元素都设置动画过渡效果。开始的时候它们的透明度为0，尺寸为0。
.row [class*="col-"] {
cursor: pointer;
opacity: 0;
-moz-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-clip: padding-box !important;
border: 5px solid transparent;
}
然后程序开始执行后，会在jQuery代码中使用一个定时器来为这些元素添加.shown class，使它们逐一显示出来。
.row [class*="col-"].shown {
opacity: 1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
在鼠标滑过卡片的时候，动态的为卡片添加一些阴影效果。
.row [class*="col-"]:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
JavaScript
该动态网格卡片布局使用jQuery代码在浏览器窗口改变的时候修改卡片的高度，以及通过定时器为相应的元素添加.shownclass，用于逐一显示卡片。
;(function () {
var elems = $('.row [class*="col-"]');
var setHeight = function (elem) {
$(elem).height($(elem).width() + 30);
};
$(window).resize(function () {
$.each(elems, function (key, value) {
setHeight(elems[key]);
});
});
var i = 0;
x = true;
$(document).click(function () {
if (i === -1 || i == elems.length) {
animate();
x = !x;
}
});
var animate = function () {
setTimeout(function () {
$(elems[i]).toggleClass('shown');
setHeight(elems[i]);
x ? i++ : i--;
if (i < elems.length && i >= 0) {
animate();
}
;
}, 60);
};
animate();
}());
如果觉得《html卡片布局按钮 Material Design风格动态网格卡片布局UI设计》对你有帮助，请点赞、收藏，并留下你的观点哦！
