[英]Equal height columns in rows
我正在尝试使用fitHeights( http://codepen.io/davatron5000/pen/fIqnF )来均衡列的行,但是我无法获取它来分别计算每行的高度。 有人对如何修改它以计算每行最高的容器有任何想法吗?
这是我正在使用的示例。 http://codepen.io/FernE97/pen/rzfid 。 目前,它正在计算高度,但它是从4个最高的位置开始而不是从每行的最高位置开始计算。
(function ($) {
'use strict';
$.fn.fitHeights = function () {
var items = $(this);
function setHeights() {
var currentTallest = 0;
items.css({ 'min-height' : currentTallest }); // unset min-height to get actual new height
items.each(function () {
if ($(this).outerHeight() > currentTallest) { currentTallest = $(this).outerHeight(); }
});
items.css({ 'min-height' : currentTallest });
}
setHeights();
$(window).on('resize', setHeights);
return this;
};
}(jQuery));
// on load
jQuery(window).load(function ($) {
$('.fitheights .module').fitHeights();
}(jQuery));
希望这会有所帮助,但请查看我所做的更新后的Codepen-本质上,我创建了sameHeights函数,并在图像上放了一个高度,希望这会对您有所帮助http://codepen.io/anon/pen/fslvc
js
$.fn.sameHeights = function() {
$(this).each(function(){
var tallest = 0;
$(this).children().each(function(i){
if (tallest < $(this).height()) { tallest = $(this).height(); }
});
$(this).children().css({'height': tallest});
});
return this;
};
$(window).load(function(){
/* $(groupOfItems).fitHeights(); */
$('ul').sameHeights();
});
的CSS
img { max-width: 100%; height:300px; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.