我发现了一个jquery脚本,使div具有相等的高度。它使用window.load和window.resize调用该函数。当我加载页面或调整页面大小时,它可以工作,但是,如果我通过站点上的链接转到页面,则div会再次变为其旧高度。我认为这与rails turbolinks(类似于具有turbolinks和window load的rails 4)有关,但是我无法使其正常工作(即使与链接中的解决方案有关)。这是脚本(它是通过资产管道加载的
equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('.container-fluid box');
});
$(window).resize(function(){
equalheight('.container-fluid box');
});
用这个 :-
$(document).on('ready page:load', function() {
equalheight('.container-fluid box');
})
或这个 :-
$(document).on('ready', function() {
equalheight('.container-fluid box');
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句