正在从 Google 电子表格加载数据已破坏同位素 jQuery

Question

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

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

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

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

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

我调用代码片段的顺序有错吗？我看不出有任何问题。我错过了从 google 提供代码的其他限制吗？

非常感谢任何想法

..另一件看起来很奇怪的事情是#content div 包含所有同位素项目的高度为 0。我必须添加重要内容！ css 让方框完全显示。奇怪

Answer 1

这是一个工作 jsfiddle。这是使用 jQuery 1.11 和同位素 v2。由于此版本的 isotope 不使用 v1.5 CSS 转换，因此它们已从您的 css 中删除，动画选项也已删除。由于您正在加载 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');            
        });

    });

 });

正在从 Google 电子表格加载数据已破坏同位素 jQuery

Loading data from Google Spreadsheet has broken isotope jQuery

jquery

google-sheets

jquery-isotope

masonry