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

Using getJSON to populate animated responsive image grid

本文关键字：图像 网格 响应 动画 getJSON 填充 使用      更新时间：2023-09-26

我正试图从flickr提要中提取图像，并使用它们填充动画响应图像网格。此处的插件信息：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>

此插件设计用于读取已加载在DOM中的静态HTML。您的JSON请求加载到DOM需要更长的时间，因此您可能需要在收到JSON数据后对插件进行回调以运行。您可能会节省成本，并尝试在插件加载上设置一个settimeout，这将允许JSON请求有足够的时间加载HTML，然后正确地操作DOM中的数据。

相关文章：