Isotope는 주문 작동을 얻을 수 없습니다

Question

그래서 Isotope를 사용하여 일련의 "항목"을 표시하고 주문합니다. 항목을 원하는 순서대로 표시하는 동안 전혀 작동하지 않습니다. 나는 그들을 간단한 parseInt와 함께 주문하려고 노력하고 있으며, 내가 뭘 잘못하고 있는지 알아 내려고 노력하고있다. 어떤 도움을 많이 주시면 감사하겠습니다!

내가 일하고 있어요 무엇의 미리보기가 여기에서 볼 수있다 : 동위 원소에 대한 http://tinyurl.com/jwz94pn

자바 스크립트 :

<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를 넣어 :

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

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

      sortBy: 'number' 

     }); 
    };   

HTML이 같이 보입니다 다음과 같이 document.ready 또는 window.load 코드를 작성하십시오.

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

,451,515,

이 작동합니다 :

<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>