砌体图像加载的问题

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

[我认为它看起来很酷，只是让它们成为可拖动的你已完成......] ANYHOW：

你的砌石代码看起来很好[我的工作几乎完全相同]但是：

• 文档中的所有JQuery都准备好了吗？
• 如果先打电话给砌体，然后淡化你的＃grid-section，会发生什么？
• 我想知道你的容器选择器是不是问题。如果您的页面上有该类的多个实例，那么我不知道在第一个或最后一个实例加载后是否会触发imagesLoaded。？

[如果有帮助你可以随时使用.masonry（'reload'）对你的砖进行排序]

希望有所帮助。