从谷歌电子表格加载数据破坏了同位素 jQuery

Question

不久前，我使用同位素制作了这个人的网格。如您所见，每个都有翻转效果。

http://thetally.efinancialnews.com/tallyassets/FinTech/index.html

我现在想再次做同样的事情，但从谷歌电子表格中输入数据，我已经成功实现了......

http://thetally.efinancialnews.com/tallyassets/fintech-40-2015/index.html

...但是，现在 jQuery 都不起作用，但我没有看到任何错误消息。所需的基本代码似乎是相同的。

我是否在调用代码段的顺序上出错了？我看不出它有什么问题。我错过了从谷歌提供代码的其他限制吗？

任何想法都非常感谢

..要添加的另一件事似乎很奇怪，其中包含所有同位素项目的#content div 的高度为 0。我必须添加重要信息！ css 让盒子完全显示出来。奇怪

Answer 1

这是一个有效的jsfiddle。 这是使用 jQuery 1.11 和 isotope v2。由于这个版本的 isotope 不使用 v1.5 CSS 过渡，因此它们已从您的 css 中删除，并且 animationOptions 已删除。由于您正在加载 json 数据，因此您需要使用同位素附加方法。顺便说一句，我注意到您的过滤器不起作用，因为它们区分大小写。所以过滤“london”除了“London”将过滤项目之外什么都不做。我更改了一些以使其正常工作。

查看下面的相关代码。

 $(document).ready(function () {
 var $container = $('#content');
     var selector = $(this).attr('data-filter');
    $container.isotope({
        itemSelector: '.box',
         filter: '*'              
    });

    $('.filter li a').on( 'click', function() {
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector
        });
        return false;
    });  


  $(function listBooks() {
       $.getJSON("https://spreadsheets.google.com/feeds/list/1ZHXE5lqr3WspVtnOpWaBUCBFxpxK_DFXoNMcVBAsiZI/od6/public/values?alt=json-in-script&callback=?",

    function (data) {

        $.each(data.feed.entry, function (i, entry) {

            var boxNo = i + 1;

            var item = '<div class="box ' + entry.gsx$sector.$t + ' ' + entry.gsx$location.$t + ' ' + 'box' + boxNo + '">';

            item += '<div class="box-all"><h2 class="box-title">' + entry.gsx$name.$t + ' ' + entry.gsx$surname.$t + '</h2><div class="box-text">' + entry.gsx$title.$t + '</div></div>';

            item += '</div>';
var $items = $('<a>' + item + '</a>');
$container.append($items).isotope( 'appended', $items );
$container.isotope('layout');            
        });

    });

 });