jquery同位素容器高度寬度當切換佈局

Question

我有一個腳本，允許切換砌體水平和磚石之間的佈局。切換功能似乎正常工作。

但是我有一個容器同位素維度的問題。

隨着水平砌體佈局，我想始終有容器高度等於3項高度。它工作正常，但當我切換所有的休息時間。這是越野車。

當我調整窗口瀏覽器的石工佈局時，行爲是非常奇怪的。容器似乎比窗口寬度更大。行爲看起來像masonryHorizo​​ntal。

我認爲錯誤的部分來自切換點擊功能：

$('.toggle-view').click(function() { 
    $('.prev').toggleClass('hidden'); 
    $('.next').toggleClass('hidden'); 
    $('.scrollable').toggleClass('hidden'); 
    $('#container-scroll').toggleClass('horizontal'); 
    $('#container-scroll').toggleClass('vertical'); 
    $('#container').toggleClass('vertical'); 
    isVertical = !isVertical; 
    var sizeStyle = isVertical ? 
     { width: '100%', maxWidth: '100%', height: height } : 
     { width: '100%', maxWidth: '100%', height: '100%' }; 
    var redraw = $container[0].offsetHeight; 
    $container.removeClass('no-transition') 
    .isotope({ 
     layoutMode: isVertical ? 'masonryHorizontal' : 'perfectMasonry' 
    }); 
}); 

這裏提琴：http://jsfiddle.net/bB9WC/1/

我花也許15小時解決問題沒有成功。

我認爲這是一個jQuery風格的寬度和高度容器的問題。 這裏的腳本允許計算兩種佈局的容器高度。

function checkContainerHeight() { 
if ($('#container-scroll').hasClass('horizontal')) { 
    height = Math.round(colW*ratio)*HIsotopeRows+20; 
    $('#container-scroll').css({ minHeight: height }); 
    $('#container').css({ minHeight: height }); 
    } 
if ($('#container-scroll').hasClass('vertical')) { 
    $('#container-scroll').css({ minHeight: '100%' }); 
    $('#container').css({ minHeight: '100%' }); 
    } 
} 

$(window).smartresize(function() { 
    checkContainerHeight(); 
}) 

Answer 1

您沒有正確設置容器的高度樣式。不要在切換點擊功能中應用任何樣式。

您必須添加minHeight，maxHeight和height。切換佈局時全部清除。

這裏提琴正確工作：http://jsfiddle.net/e5YMf/1/

function checkContainerHeight() { 
if ($('#container-scroll').hasClass('horizontal')) { 
    height = Math.round(colW*ratio)*HIsotopeRows+20; 
    $('#container-scroll').css({ height: '' }); 
    $('#container').css({ height: '' }); 
    $('#container-scroll').css({ minHeight: height }); 
    $('#container').css({ minHeight: height }); 
    $('#container-scroll').css({ maxHeight: height }); 
    $('#container').css({ maxHeight: height }); 
    } 
if ($('#container-scroll').hasClass('vertical')) { 
    $('#container-scroll').css({ maxHeight: '' }); 
    $('#container').css({ maxHeight: '' }); 
    $('#container-scroll').css({ height: '100%' }); 
    $('#container').css({ height: '100%' }); 
    } 
} 

function InitializeIsotope() { 
$('#container').isotope({ 
    layoutMode: 'masonryHorizontal', 
    masonryHorizontal: { 
    rowHeight: Math.round(colW*ratio), 
    } 
}); 
} 

function checkIsotope() { 
if ($('#container-scroll').hasClass('horizontal')) { 
    $container.isotope({ 
     layoutMode: 'masonryHorizontal', 
     masonryHorizontal: { 
     rowHeight: Math.round(colW*ratio), 
     } 
    }); 
} 
if ($('#container-scroll').hasClass('vertical')) { 
    $container.isotope({ 
     layoutMode: 'perfectMasonry', 
     perfectMasonry: { 
     columnWidth: colW, 
     rowHeight: Math.round(colW*ratio), 
      }, 
     }); 
     } 
} 

$(window).smartresize(function() { 
    checkWidth(); 
    checkContainerHeight(); 
    checkIsotope(); 
}) 

checkWidth(); 
checkContainerHeight(); 
checkIsotope(); 
InitializeIsotope(); 


$('.toggle-view').click(function() { 
$('.prev').toggleClass('hidden'); 
$('.next').toggleClass('hidden'); 
$('.scrollable').toggleClass('hidden'); 
$('#container-scroll').toggleClass('horizontal'); 
$('#container-scroll').toggleClass('vertical'); 
$('#container').toggleClass('horizontal'); 
$('#container').toggleClass('vertical'); 
checkWidth(); 
checkContainerHeight(); 
checkIsotope(); 
$('#container').isotope('reLayout', $items, callback); 
});