嘿,我有 20 个 div 以不同的高度向左浮动。我使用这个脚本来调整它们的大小。当我的网站使用像素设计时,它运行得非常好。
当我将我的网站更改为 % design(百分比设计)时,脚本不再可靠地工作,有时它不会调整大小。
你能看一下,液体布局是否需要任何调整吗?
也许这是我调用脚本的方式?
非常喜欢
这里是:
var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();
function setConformingHeight(el, newHeight) {
// set the height to something new, but remember the original height in case things change
el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
el.height(newHeight);
}
function getOriginalHeight(el) {
// if the height has changed, send the originalHeight
return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}
function columnConform() {
// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
$('div.column').each(function(index) {
if(currentRowStart != $(this).position().top) {
// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = getOriginalHeight($(this));
rowDivs.push($(this));
} else {
// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($(this));
currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);
}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
});
}
$(window).resize(function() {
columnConform();
});
$(document).ready(function() {
columnConform();
});
最佳答案
好吧,如果您将它更改为流体布局(% 设计),那么您将不得不添加一个窗口调整大小监听器,基本上当调整大小事件完成或运行时,您需要调用脚本以便它可以重新计算新尺寸,您不需要用像素来做,因为它是固定尺寸,并且一旦分配,无论您调整实际屏幕大小多少次都不会改变。
关于javascript - 使所有 float div 具有相同高度的脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5933144/