Question

前段时间我用同位素制作了这个网格。你可以看到每个都有翻转效果。

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

我现在想再次做同样的事情，但是从Google电子表格中提取数据，我已经成功实现了......

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

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

我是否按照我称之为代码的顺序发生了错误？我无法看到任何问题。是否存在其他限制从谷歌提供代码，我错过了？

任何想法都非常感激

..添加的另一件事似乎很奇怪的是#content div保存所有同位素项目的高度为0.我必须添加重要的！ css让盒子显示出来。奇怪

Answer 1

这是一个有效的jsfiddle。这是使用jQuery 1.11和同位素v2。由于此版本的同位素不使用v1.5 CSS转换，因此它们已从您的css中删除，并且animationOptions已被删除。由于您正在加载json数据，因此需要使用附加同位素的方法。顺便说一句，我注意到你的过滤器不起作用，因为它们区分大小写。所以过滤＆＃34;伦敦＆＃34;什么都不做，但＆＃34;伦敦＆＃34;将过滤项目。我换了一些让它们起作用。

请参阅下面的相关代码。

 $(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');            
        });

    });

 });

从Google Spreadsheet加载数据破坏了同位素jQuery

1 个答案: