-1

我已经使用 ajax (jQuery) 构建了一个 Flickr 照片提要，并希望将砌体布局应用于图像。

这是页面http://flickrfeed.memonamadi.com/（单击城市按钮获取提要）。

我已经尝试使用 Desandro 使用 jQuery 应用 Masonry 插件，但它不适用于缩略图。

该插件可以在提要上使用吗？如何使用？或者是否有更简单的 css 解决方案将所有缩略图调整为相同大小并在不缩小它们的情况下对齐它们？

4

1 回答 1

0

如果不仔细查看您的代码，就很难真正为您指明正确的方向。也许您可以让我们成为一个jsfiddle，这样我们就可以看到您尝试使用的代码示例。

我会说，几天来我一直在尝试做类似的事情，但直到今天都没有取得多大成功。我可以从 flickr 加载图像，但它们不会遵守砖石网格。

这是我最终想出的代码，用于拉入我的 flickr 提要并将砌体应用到其布局中，根据 Masonry 文档使用imagesLoaded.js ：

$(document).ready(function() {
     var $gallery = $('#FlickrImages');                                            
    //Flickr Integration
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=[YOUR-FLICKR-USER-ID]&lang=en-us&format=json&jsoncallback=?", function(data){
        $.each(data.items, function(i,item){
            if(i<=9999){
                $("<img/>").attr("src", item.media.m).appendTo($gallery)
                .wrap("<a class='gallery-image' href='" + item.link + "' target='_blank' title='Flickr'></a>");
            }
        });
       $gallery.imagesLoaded( function() {
         $gallery.masonry();
        });            
    });                     
});

我的html很简单：

<div id="FlickrImages"></div>

在网上闲逛了几个小时后，这是我发现的唯一能够帮助解决我的问题的东西。我的问题最终是我最初试图添加上述代码的这一部分：

$container.imagesLoaded(function() { $container.masonry(); });

对自己$(document).ready(function()

一旦我将它移到与我的 flickr feed JSON 函数相同的函数中，砌体就可以完美地工作。我通过阅读此线程发现了这一点：

jquery-flickr-masonry-imagesloaded-how-merge-all

于 2014-09-08T20:26:51.527 回答