砌体图像加载问题

Question

我的一个页面有点问题，它从服务器抓取大量图像，将它们转储到屏幕上，然后使用砖石将它们全部铺开。

所有图像都加载了，但似乎在图像加载到底部之前就调用了砌体，所有图像都加载得一团糟。我附上了一些截图给你看。请注意，这也发生在其他页面上。

还有一些我正在使用的重要代码。

<script>
$.each($('.img-grid-container img'), function (index, obj) {
    $(this).css({
        'width' : (50 + Math.round((Math.random()) * 330))
    });
});
</script>

<script>
var $container = $('.img-grid-container');

$container.imagesLoaded( function(){
    $('#grid-section').fadeIn("normal");
    $('#loader-container').hide();
  $container.masonry({
    itemSelector : '.attachment-full',
  columnWidth: 30
  });
});
</script>

我们总是感谢任何帮助。

-R

Answer 1

[我认为它看起来很酷，只需将它们设置为可拖动的，然后你就完成了...] 无论如何：

你的砌体代码对我来说看起来不错 [我有一些几乎相同的东西适合我] 但是：

• 文档中的所有 JQuery 都准备好了吗？
• 如果您先调用 masonry，然后将 #grid-section 淡入，会发生什么情况？
• 我想知道您的容器选择器是否有问题。如果您的页面上有该类的多个实例，那么我不知道 imagesLoaded 是否会在第一个或最后一个实例加载后触发..？

[如果有帮助，您可以随时使用 .masonry('reload') 对积木进行分类]

希望对您有所帮助。