javascript - Masonry 问题 - 图像首先垂直加载，然后重新排列。

Question

示例 - http://paulmatheson.net/photography/nature.html

我的 masonry 代码:

<script type="text/javascript">
var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
  $container.masonry({
    columnWidth: 240,
    gutter: 10,
    itemSelector: '.grid-item'
  });
  $container.imagesLoaded.done( function(instance) {
    $container.masonry('layout');
  });
});

我是否错误地调用了它？

Answer 1

已编辑 您的 $container.imagesLoaded.done 函数不正确，它是 $container.imagesLoaded().done。它也在 $container.imagesLoaded(function() 中，但它不应该在其中。您不需要像这样调用 imagesloaded 两次并再次布局 masonry ..

您的原始图像加载代码在这里:

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 240,
gutter: 10,
itemSelector: '.grid-item'
});
$container.imagesLoaded.done( function(instance) {
$container.masonry('layout');
});
});

需要:

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 240,
gutter: 10,
itemSelector: '.grid-item'
});

}); 我还建议在 masonry.js 之前加载 imagesloaded.js

如果你确实必须使用done方法，你可以使用以下代码:

var $container = jQuery('#masonry-grid'); 
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 240,
gutter: 10,
itemSelector: '.grid-item'
});

}).done( function(instance) {
$container.masonry('layout');
});