Question

我正在尝试从我的flickr Feed中提取图像并使用它们来填充动画响应图像网格。插件信息在这里： http://tympanus.net/codrops/2012/08/02/animated-responsive-image-grid/

我能够使用getJSON获取所需的信息，并且我按插件需要的方式对其进行格式化，但网格不会自行格式化。

结果数据如下所示，这是插件应该读取的内容：

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow ri-grid-loading">
  <ul>
    <li><a href="#"><img src="[Image Link]></a></li>
    <li><a href="#"><img src=[Image Link]></a></li>
    ...
  </ul>
</div>

我知道这种格式化应该有效，因为我通过将链接直接放在HTML中来尝试它并且它工作得很好。但是，当我使用getJSON将信息放入HTML中时（因为我希望页面在更新Flickr源时自行更新），插件似乎不会将各个部分组合在一起。

以下是我正在使用的JSON请求：

<script type="text/javascript">
  $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=109059624@N04&lang=en-us&format=json&jsoncallback=?", function(data){
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#ri-grid")
        .wrap('<li><a href="#"></a></li>');
    });
    $("#instagrams").children().wrapAll('<ul />');
  });
</script>

这是我用来创建网格的脚本：

<script type="text/javascript"> 
        $(function() {

            $( '#ri-grid' ).gridrotator( {
                w320 : {
                    rows : 3,
                    columns : 4
                },
                w240 : {
                    rows : 3,
                    columns : 3
                }
            } );

        });
    </script>

Answer 1

此插件旨在读取已在DOM中加载的静态HTML。您的JSON请求需要更长时间才能加载到DOM，因此您可能需要在收到JSON数据后对插件执行回调操作。您可能会廉价并尝试在插件加载上设置settimeout，这应该允许JSON请求有足够的时间加载HTML，然后正确地操作DOM中的数据。

使用getJSON填充动画响应图像网格

1 个答案: