图片与 Isotope 和 imagesLoaded 对齐

Question

我想从公司帐户加载一些 flickr 照片，但在图片对齐方面遇到了一些问题。

我正在使用 Isotope 以正确的方式对齐图片。现在我面临的问题是，当我的网站第一次加载时图片重叠。当我调整 window 大小时，图片对齐正常，一切正常，但它没有解决我的基本问题。为了解决网站上第一次调用的重叠问题，我尝试使用推荐的 imagesloaded.js 但它不起作用。

起初我以为是因为我通过异步调用 ajax 加载了图片，所以我将 AJAX 函数更改为以下函数，但我仍然面临同样的问题。

$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?id=125591374@N02&format=json&jsoncallback=?", function (data) {
    console.log(data);
    $("img").each(function () {
        $(this).attr("src", data.items[i].media.m);
        i++;
    });
});

这是我的同位素脚本

var $container = $('#picContainer');

$container.isotope({
    itemSelector: '.picContainer-item'
    , percentPosition: true
    , layoutMode: 'masonry'
    , masonry: {
        columnWidth: 50
    }
});

$container.imagesLoaded().progress(function () {
    $container.isotope("layout");
});

我找不到问题。有谁知道我哪里做错了吗？

为了更好的理解，我也准备了codepen :)

Codepen example

谢谢！

Answer 1

发生的事情是在所有图像加载之前加载同位素。所以它不会设置正确的宽度，直到它再次呈现它（当你调整 window 的大小时）。如果将同位素代码放在 $(window).load(function(){}) 中（仅在加载所有资源后运行），它将起作用。

$(window).load(function() {

  var $container = $('#picContainer');

    $container.isotope({
      itemSelector: '.picContainer-item'
      , percentPosition: true
      , layoutMode: 'masonry'
      , masonry: {
        columnWidth: 50
      }
    });

});

CodePen

（另外，您可以删除 imagesloaded.js）

图片与 Isotope 和 imagesLoaded 对齐

Picture alignment with Isotope and imagesLoaded

html

jquery

alignment

jquery-isotope