1

在砌体布局上使用 gutterwidth 时，我遇到了一个小问题，但非常烦人。我将内容附加到单击功能上的清除 div（在每一行之后），然后重新加载砌体以将其包含在网格中。一个小问题是，当一个 div 被点击时，它似乎会切断容器的右侧一秒钟左右，这看起来像是一个错误，它偶尔会使容器跳下来。
我注意到，当从gutterwidthjquery 中取出属性并将其替换为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');
    });

});

我错过了一些非常明显的东西，或者在使用排水沟宽度时可能根本无法修复（希望它可以），但这有点烦人。

4

1 回答 1

0

问题正在发生，因为当您单击 a 块以添加项目时，它会将 css 元素overflow:hidden应用于 id #block-wrap。如果您添加overflow:visible!important到 css 样式，它将克服这个问题。

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

这是一个固定的小提琴链接。

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