Question

在砌体布局上使用gutterwidth时，我遇到了一个小但非常恼人的问题。我将内容附加到单击函数上的清除div（每行之后），然后重新加载砌体以将其包含在网格中。然而，小问题是，当点击div时，它似乎会将容器的右侧切断一秒左右，这看起来像是一个错误，它偶尔会使容器跳下来。
我注意到从jquery中取出gutterwidth属性并将其替换为margin-left和margin-right样式时，这解决了问题，但我最好需要使用gutterwidths，因为我将添加多个尺寸divs（包括100％宽度）所以我不想要任何间隙。
这是一个jsfiddle演示（点击div时在容器的右侧看）：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');
    });

});

这可能是我很遗憾的事情，或者在使用水槽宽度时可能无法修复（希望它可以），但它只是有点刺激。

Answer 1

问题正在发生，因为当您点击某个块来添加该项时，它会将css元素overflow:hidden应用于ID #block-wrap。如果您将overflow:visible!important添加到css样式中，它将解决此问题。

我已快速搜索了所有附加的.js文件和您的脚本，但我无法找到overflow:hidden的添加位置......但我上面提到的css覆盖不会似乎引起任何额外的问题。

这是fixed fiddle link.

#block-wrap {
   position: relative;
   width: 100%;
   padding-top: 30px;
   margin: 0 auto;
   overflow:visible!important;
}

jQuery：砌体gutterwidth问题

1 个答案: