图片与 Isotope 和 imagesLoaded 对齐答案

【问题标题】：Picture alignment with Isotope and imagesLoaded图片与 Isotope 和 imagesLoaded 对齐
【发布时间】：2016-06-09 01:08:02
【问题描述】：

我想从公司帐户加载一些 flickr 照片，但图片对齐有一些问题。

我正在使用 Isotope 以适当的方式对齐图片。现在我面临的问题是，当我的网站第一次加载时，图片会重叠。当我调整窗口大小时，图片对齐正常，一切都很好，但这并不能解决我的基本问题。为了解决网站上第一次调用的重叠问题，我尝试使用推荐的 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

谢谢！

【问题讨论】：

问题解决了，只要把 imagesLoaded() 函数往上放一点
未解决。这会禁用同位素库本身。尝试调整页面大小。

标签： jquery html alignment jquery-isotope

【解决方案1】：

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

$(window).load(function() {

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

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

});

CodePen

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

【讨论】：

对不起，我的回答有点快。它不像你说的那样工作。我将同位素函数放在 json 调用中，但它仍然是同样的问题。图片像以前一样重叠了
好的，我认为有某种缓存问题，它以前工作过。让我再努力一点。
是的，我做到了，如果我直接从我的普通浏览器加载它，我确实遇到了我说的问题。如果我使用 chrome 的隐身模式，一切正常。似乎是我的浏览器的缓存问题。非常感谢您的解决方案。
不，我很确定它还是坏了，哈哈。我刚刚解决了。您需要一个 window.load 超过同位素功能。让我更新我的答案。
是的，你是对的。我猜 window.load 函数是比 setTimeout 函数更好的编程风格。