Question

所以我使用Isotope来显示和订购一系列＆＃34;项目＆＃34;。虽然这些项目正如我所希望的那样显示，但订单根本不起作用。我试图用一个简单的parseInt命令他们，我试着弄清楚我做错了什么。任何帮助将不胜感激！

我可以在此处查看我正在处理的内容的预览：http://tinyurl.com/jwz94pn

同位素的Javascript：

    var loadIsotope = function () {
       var $container = $('#social-feed');
       $container.isotope({
          // options
          itemSelector: '.item',

          masonry: {
            gutter: '.gutter-sizer'
          },
          getSortData: {
            number: '.order parseInt',
          },

          sortBy: 'number'

       });
    };

HTML看起来像这样：

    <div id="social-feed">
       <div class="item">
          <p>item 3</p>
          <p class="order">3</p>
       </div>
       <div class="item">
          <p>item 1</p>
          <p class="order">1</p>
       </div>
       <div class="item">
          <p>item 2</p>
          <p class="order">2</p>
       </div>
    </div>

Answer 1

将你的jQuery代码放在document.ready或window.load中，如下所示：

$(document).ready(function() {
    // All code goes here
});

这应该有效：

<script>
    $(window).load(function(){
        // init
        loadInstagram().done(loadIsotope);

        var loadInstagram = function () {
          // create a deferred object
          var r = $.Deferred();
          var amount = 10;          

         // instagram feed script
          var userFeed = new Instafeed({
            get: 'user',
            userId: 538920369,
            accessToken: '538920369.467ede5.7ee1e8e2079e4daabd4284614c98479c',
            limit: amount,
            resolution: 'low_resolution',
            template: '<div class="item photo instagram"><img src="{{image}}" class="image" onClick="window.open(\'{{link}}\',\'_blank\'); return false;" /><div class="content-float"><p class="message">{{caption}}</p></div><div class="base-content"><a href="javascript:fbShare(\'{{link}}\', \'Fb Share\', \'{{caption}}\', \'{{image}}\', 520, 350)" class="action">Share</a><img src="images/instagram.png" class="social-icon" \></div></div>'/*,
            filter: function(image) {
                return image.caption.text.indexOf('Trim') < 0;
              }*/
          });
          userFeed.run();

          setTimeout(function () {
            // and call `resolve` on the deferred object, once you're done

            for (var i = 0; i < instaFeed.length; ++i) {
                document.getElementById('social-feed').appendChild(instaFeed[i]);
                console.log("loop " + i);
            }
            console.log("after loop");
            r.resolve();
            orderItems();
          }, 2500);

          // return the deferred object
          return r;
        };

        var loadIsotope = function () {
          var $container = $('#social-feed');
          $container.isotope({
            // options
            itemSelector: '.item',

            masonry: {
              gutter: '.gutter-sizer'
            },
            getSortData: {
                number: '.order parseInt',
              },

            sortBy: 'number'

          });

        };

    function orderItems() {
        /* TWITTER ORDER */
        var order_twitter = new Array(1,6,7,10,13,15,17);

        var elems = document.getElementsByClassName('twitter');
        for (var i = 0; i < elems.length; ++i) {
            var item = elems[i];
            item.innerHTML += ('<p class="order">' + order_twitter[i] + '</p>');
        }

        /* FACEBOOK ORDER */
        var order_facebook = new Array(3,5,8,12,19,20);

        var elems = document.getElementsByClassName('facebook');
        for (var i = 0; i < elems.length; ++i) {
            var item = elems[i];
            item.innerHTML += ('<p class="order">' + order_facebook[i] + '</p>');
        }

        /* INSTAGRAM ORDER */
        var order_instagram = new Array(2,4,9,11,14,16,18);

        var elems = document.getElementsByClassName('instagram');
        for (var i = 0; i < elems.length; ++i) {
            var item = elems[i];
            item.innerHTML += ('<p class="order">' + order_instagram[i] + '</p>');
        }
    }

    function fbShare(url, title, descr, image, winWidth, winHeight) {
        var winTop = (screen.height / 2) - (winHeight / 2);
        var winLeft = (screen.width / 2) - (winWidth / 2);
        window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width='+winWidth+',height='+winHeight+'&profile_id=38691411169');
    }

    //getElementsByClassName function
    if (!document.getElementsByClassName) {
            document.getElementsByClassName=function(cn) {
                var allT=document.getElementsByTagName('*'), allCN=[], i=0, a;
                while(a=allT[i++]) {
                    a.className==cn ? allCN[allCN.length]=a : null;
                }
                return allCN;
            }
        }

    }); 



</script>

同位素无法下令工作

1 个答案: