Question

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

我的砌石代码：

<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

<强> EDITED 您的$container.imagesLoaded.done功能不正确，为$container.imagesLoaded().done。它也在$container.imagesLoaded(function()里面，它不应该。您不需要像这样再次调用两次图像并再次布局砌体..

您的原始图片加载代码：

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');
});

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

1 个答案: