jQuery:砌体排水沟宽度问题

Question

在砌体布局上使用 gutterwidth 时，我遇到了一个小但非常恼人的问题。我在点击功能上将内容附加到清除 div(在每一行之后)，然后重新加载砌体以将其包含在网格中。不过有个小问题，当点击一个div时，它似乎会砍掉容器的右边一秒钟左右，这看起来像是一个错误，它偶尔会让容器跳下来。
我注意到当从 jquery 中取出 gutterwidth 属性并将其替换为 margin-left 和 margin-right 样式时，这解决了问题，但是我最好需要使用 gutterwidths，因为我将添加多个尺寸的 div(包括 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

出现此问题是因为当您单击一个 block 以添加元素时，它会将 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;
}