Question

我想从公司帐户加载一些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 example

谢谢！

Answer 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）

与Isotope和imagesLoaded的图片对齐

1 个答案: