絶対配置レイアウトを使用しています(ピンタレストに少し似ています)
そのため、window.resize でも位置を再計算する必要があります。このイベントは dom ready では発生しないため、手動で行います。
$(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 は適切に配置されます。何か考えはありますか?