1

石積みのレイアウトでガター幅を使用しているときに、小さな、しかし非常に苛立たしい問題があります。クリック関数で (すべての行の後に) クリア div にコンテンツを追加してから、石積みをリロードしてグリッドに含めます。ただし、小さな問題は、div をクリックすると、コンテナーの右側が 1 秒程度切り落とされたように見えることです。プロパティをjqueryから取り出してスタイルに置き換えると問題が解決した
ことに気付きましたが、複数のサイズのdiv（100％幅を含む）を追加するので、gutterwidthsを使用する必要があるので、何もしたくありませんギャップ。jsfiddle のデモを次に示します (div をクリックしたときにコンテナーの右側を見てください)。gutterwidthmargin-leftmargin-right
http://jsfiddle.net/SzK5F/5/
jQuery:

$(document).ready(function() {  
    var $container = $('#block-wrap');

    $(function(){
        $container.imagesLoaded(function(){
            $('#block-wrap').masonry({
            itemSelector : '.content-block-small, .content-block-big, .listing-item, .preview-listing:not(.excluded)',
            columnWidth: 3,
            gutterWidth: 15,
            isFitWidth: true,
            isAnimated: true
            });
        });
    });
});


$(document).ready(function () {

    $(".listing-item").click(function () {

        $('.listing-properties').hide();
        var previewForThis = $(this).nextAll('.preview-listing:first');
        var otherPreviews = $(this).siblings('.preview-listing').not(previewForThis);
        otherPreviews
            .addClass('excluded') // exclude other previews from masonry layout
            .hide();
        previewForThis
            .removeClass('excluded')
            .append($('#property' + $(this).attr('hook')).show())
            .hide()
            .delay(400)
            .fadeIn("slow");
        setTimeout(function(){ 
            $('html, body').animate({ scrollTop: previewForThis.offset().top-20 }, "slow");
        }, 500);
        $('#block-wrap').masonry('reload');
    });

});

私が見逃しているのは明らかなことかもしれませんし、ガター幅を使用している間はまったく修正できないかもしれません (うまくいけば修正できます) が、少しイライラします。

4

1 に答える 1

0

ブロックをクリックして項目を追加すると、 css 要素overflow:hiddenが id に適用されるため、問題が発生しています#block-wrap。overflow:visible!importantCSS スタイルに追加すると、この問題が解決されます。

overflow:hidden添付されているすべての .js ファイルとスクリプトを簡単に検索しましたが、追加されている場所が見つかりません... しかし、上記の css オーバーライドは特別な問題を引き起こしているようには見えません。

これは固定フィドルリンクです。

#block-wrap {
   position: relative;
   width: 100%;
   padding-top: 30px;
   margin: 0 auto;
   overflow:visible!important;
}
于 2013-04-16T23:37:00.870 に答える