javascript - 砌体最初重叠

Question

第一次加载 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">

Answer 1

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

尝试将其添加到准备好的处理程序中，但在砌体调用下方:

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