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 スタイルの幅と高さのコンテナの問題だと思います。ここでは、2 つのレイアウトのコンテナーの高さを計算できるスクリプトを示します。

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、および高さを追加する必要があります。レイアウトを切り替えると、すべてクリアされます。

ここでフィドルが正しく動作します: 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 に答える