javascript - gridify.js 仅在页面改变大小后布局

Question

gridify 有这个问题- 图像只有在我放大或缩小页面后才会布局。这不会发生在任何示例页面上。

这是我的代码:

$(document).ready(function(){
    var albumId = "xxxxxxxxxxxxx";
    $.ajax({
        dataType:"json",
        url:'http://graph.facebook.com/' + albumId + '?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371',
        success:function(incomming){
            var photos = incomming.photos.data;
            for (var key in photos){
                $("#photos").append("<img src='" + photos[key].source + "' class='image'>");
            }
        },
        error:function(err){
            console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
        }
    });
});
$(window).load(function() {
    var options = {
        items:3,
        srcNode: 'img',
        margin: '20px',
        width: '250px',
        resizable: true,
        transition: 'all 0.5s ease'
    }
    $('.grid').gridify(options);
});

我的 .grid 元素开始时是一个空的 div。

Answer 1

您的问题在于您何时做事(而不是您正在做什么)。所以，你想实现这个:

1. 对 Facebook 进行 ajax 调用以抓取一些图像
2. 将来自 Facebook 的新标记附加到您的 DOM
3. 调用 gridify 函数来排列添加到页面的标记

.ready() 事件发生在 HTML 文档加载之后，此时您正在执行 (1) 和 (2)。 onload 事件在页面上的所有内容(包括图像等)完成下载后发生，这就是您正在执行的操作 (3)。所以，这听起来不错......

但重要的是，onload 事件不会等到您对 Facebook 的异步调用完成 - 它不知道这一点，它只会等待页面上已有的标记.这意味着您正在启动一个异步调用，然后在它完成之前立即跳转到 (3)。正在调用您的 gridify 函数，目前尚无可用的函数。

您可能会幸运地采用这种安排(有时它可能会奏效)，但正如您发现的那样，它并不是很可靠。为确保 (1)、(2)、(3) 按顺序运行，只需稍微调整代码的顺序，将 gridify 函数放入来自 Facebook 的回调中:

$(document).ready(function(){
  var albumId = "xxxxxxxxxxxxx";
  var options = {
    items:3,
    srcNode: 'img',
    margin: '20px',
    width: '250px',
    resizable: true,
    transition: 'all 0.5s ease'
  };
  $.ajax({
    dataType:"json",
    url:'http://graph.facebook.com/' + albumId + '?fields=photos.fields%28images,source,picture,link,name%29,photos.limit%2840%29&_=1425840156371',
    success:function(incomming){
      var photos = incomming.photos.data;
      for (var key in photos){
        $("#photos").append("<img src='" + photos[key].source + "' class='image'>");
      }
      $('.grid').gridify(options);
    },
    error:function(err){
      console.log("Error collecting photos: " + JSON.stringify(err, null, 2));
    }
  });
});

我无法对此进行测试，但希望这至少能为您指明正确的方向。