与json的基本同位素

时间:2013-10-28 22:01:00

标签: jquery json jquery-isotope

我是菜鸟并试图用JSON饲料实施同位素。

我可以让div显示布局不好,但是一旦我应用同位素代码,就不会在页面上显示任何内容。

以下是http://jsfiddle.net/ben_beek/ujX5G/

这是脚本:

        $(document).ready(function () {


        $.getJSON("library.json",


        function (data) {

            $.each(data.payload, function (u, v) {

                var string = v.title;
                var urltitle = string.replace(/ /g, '-');
                var desc = v.description;

                if (v.description === null) {
                    var desc = v.title;
                } else {
                    var length = 200;
                    var desc = desc;
                    var desc = desc.substring(0, length);
                    var desc = desc.concat('...');
                }


                $("#container").append('<div class="item"><a href="http://beek.co/guide/' + v.id + '--' + urltitle + '"><img src="http://cdn.beek.co/' + v.thumbName + '" "width="200" height="200" /></a><p    align="center">' + desc + '</p></div>')
            });
        });


        $('#container').isotope({
            itemSelector: '.item',
            layoutMode: 'fitRows'
        });

    });



        $('#container').isotope({
            filter: '.my-selector'
        }, function ($items) {
            var id = this.attr('id'),
                len = $items.length;
            console.log('Isotope has filtered for ' + len + ' items in #' + id);
        });

任何明显可能出错的事情?

1 个答案:

答案 0 :(得分:0)

$ .container调用是在错误的时间进行的,需要在JSON准备好后调用。