砌体起初重叠答案

【问题标题】：Masonry overlapping at first砌体起初重叠
【发布时间】：2014-03-21 11:24:37
【问题描述】：

第一次加载 Masonry 时，图像会重叠，您将在此 JSFiddle 中看到。

调整屏幕大小后，一切正常。当我在第二个窗口中打开它时，我也发现它加载正常。

（在 JSFiddle 上，您必须将链接复制并粘贴到另一个选项卡中才能复制问题。）

我认为这与图像未及时加载和 Masonry 计算错误的空间量有关，但我在其他问题中尝试了类似的解决方案但无济于事。

这是我的代码：

var fragments = [],
    $container = $('#container');
    // initialize the masonry instance
    $container.masonry({
        columnWidth: 1,
        itemSelector: '.item'
    });

$container.masonry('bindResize');

$('.feed').feeds({
    feeds: {
         asos_f_uk: 'http://www.comfyshoulderrest.com/scrape.php?id=1',
    },
    //max: 10,
    loadingTemplate: '<h3 class="feeds-loader text-muted" style="text-align: center;">Loading...</h3>',
    entryTemplate : 'entryTmpl',
    onComplete: function (entries) {
            $container.masonry('reloadItems').masonry();
    }

HTML：

<script type="text/html" id="entryTmpl">

<div class="item">
        <a href="<!=link!>">
            <div class="image"><img src="<!=title!>" style="width: 100%;"></div>
        </a>
        <div class="text">
            <ul class="list-inline">
                <li><span class="price text-warning"><strong>&pound;7.00</strong></span> <span class="text-muted"><strike>&pound;14.00</strike></span></li>
                <li class="text-muted"><strong><!=content!></strong></li>
            </ul>
        </div>
    </div>
</script>

<div id="container" class="feed">

【问题讨论】：

有趣。我只在 Chrome 中遇到这个问题。 Firefox 完美呈现。
这很有趣。我只在 Chrome 中进行了测试，因为它是一个扩展程序。

标签： javascript jquery jquery-masonry

【解决方案1】：

我之前在使用 Masonry 时遇到过同样的错误。对我有用的解决方案 - 虽然有点难看 - 是在完全加载后再次调用 masonry。

尝试在准备好的处理程序中添加它，但在你的砌体调用下方：

setTimeout(function(){ $container.masonry() }, 200);

【讨论】：