3

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

1 回答 1

2

您没有正确设置容器的高度样式。不要在切换点击功能中应用任何样式。

您必须添加 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 );
});
于 2013-04-17T14:48:02.973 回答