切换布局时的jquery同位素容器高度宽度答案

【问题标题】：jquery isotope container height width when toggle layout切换布局时的jquery同位素容器高度宽度
【发布时间】：2013-04-10 07:38:57
【问题描述】：

我有一个脚本，允许在 masonryHorizontal 和 masonry 之间切换布局。切换功能似乎可以正常工作。

但是我对容器同位素尺寸有疑问。

使用水平砌体布局，我希望容器高度始终等于 3 个项目的高度。它工作正常，但是当我切换时一切都会中断。有问题。

当我在砌体布局上调整 Windows 浏览器的大小时，行为非常奇怪。容器似乎比窗户的宽度更大。该行为看起来像砌体水平。

我认为部分错误来自切换点击功能：

$('.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();
})

【问题讨论】：

标签： jquery layout styles responsive-design jquery-isotope

【解决方案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 );
});

【讨论】：