我使用的是绝对定位布局(有点类似于 pinterest)
所以我还需要在 window.resize 上重新计算位置:由于这个事件没有在 dom 就绪时触发,所以我手动进行。
$(document).ready(function(){
$(window).resize();
});
$(window).resize(setupBlocks);
现在,此函数 setupBlocks 检查 HTML 元素的大小以计算其新位置
function setupBlocks() {
if ($('.fancyContent').length > 0) {
if ($('.rightFixed').length > 0) $('.fancyContent').width($(window).width() - 320)
windowWidth = $('.fancyContent').width();
//colWidth = $('.fancyContent .widgetHelp').outerWidth();
blocks = [];
//console.log(blocks);
colCount = Math.floor(windowWidth / (colWidth + margin * 2));
for (var i = 0; i < colCount; i++) {
blocks.push(margin);
}
$('.fancyContent .widgetHelp').css({
'position': 'absolute',
'width': colWidth
});
positionBlocks();
var topFooter = $('.fancyContent .widgetHelp:last').offset().top + 350;
$('footer').css({
'position': 'absolute',
'top': topFooter
});
//console.log(topFooter);
$('.fancyContent').css('visibility', 'visible');
$('#load').remove();
//console.log($('#load').length);
}
}
function positionBlocks() {
$('.fancyContent .widgetHelp').each(function () {
var min = Array.min(blocks);
var index = $.inArray(min, blocks);
var leftPos = margin + (index * (colWidth + margin));
$(this).css({
'left': leftPos + 'px',
'top': min + 'px'
});
blocks[index] = min + $(this).outerHeight(true) + margin;
});
}
出乎意料的是,这是按预期执行的。但是在调整窗口大小之前,位置的计算并不是很好。然后位置变得准确。
我知道这是一个长镜头。但知道为什么它的行为会有所不同吗?
如果你自己测试它会更好:http://209.51.221.243/integracion/login.php
加载页面时,div 几乎没有问题(其中一些是垂直接触的),但是如果您调整 div 的大小,则 div 会很好地定位。有什么想法吗?