Question

我有一个脚本，允许在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();
})

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 );
});

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

1 个答案: