同位素 - 工作在jsFiddle，但不在現場

Question

我開始在jsFiddle上試驗同位素，我偶然發現 - 然後將確切的代碼複製到文本/編輯中，以創建一個非常基本的測試頁。 這是我的問題：我做的jsFiddle和測試頁不匹配。

• 的jsfiddle：http://jsfiddle.net/emilyryder/DEQZB/
• 我的測試網站：http://emilyryder.com/test/test.html

我期望的影響是磚石佈局，三列，和百分比寬度，使他們重新大小的瀏覽器。

我的測試頁面似乎只服從CSS而不是JavaScript。

我已經使用JavaScript，但不是jQuery，我明白Isotope是一個jQuery插件。 （有沒有一步，我在這裏失蹤或者是適合我只是在我的網站拋出這個代碼？）

也有一個「外部資源」，我覺得現在是原始的jsfiddle，我發現代碼，但在當時（大約一個小時前），我認爲它是我編寫腳本時爲我生成的，並且我打算附加它 - 它被保存爲「jquery.isotope.min.js」的相同名稱。 （從未使用jsFiddle之前哈哈）然而，刪除代碼鏈接對網站沒有影響。

的jsfiddle代碼在我的請求JavaScript和CSS的test.html頁：

<link rel="stylesheet" href="teststyle.css"> 
<script type="text/javascript" src="jquery.isotope.min.js"></script> 
<script type="text/javascript" src="js.js"></script> 

Answer 1

應該高度jQuery的文件，也是一個回調函數你缺少兩個部分

使用本

<link rel="stylesheet" href="teststyle.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> 
<script type="text/javascript" src="jquery.isotope.min.js"> 
<script> 
$(document).ready(function(){ 
var $container = $('#container'); 

$container.load(function() { 
    $container.isotope({ 
     // options... 
    }); 
}); 


$(function() { 
    var $container = $('#container'), 
     $items = $('.item'); 

    $container.isotope({ 
     itemSelector: '.item', 
     masonry: { 
      columnWidth: 0 
     }, 
     resizesContainer: false, 
     getSortData: { 
      fitOrder: function ($item) { 
       var order, 
       index = $item.index(); 

       if ($item.hasClass('large') && index % 2) { 
        order = index + 1.5; 
       } else { 
        order = index; 
       } 
       return order; 
      } 
     }, 
     sortBy: 'fitOrder' 
    }); 

    $items.click(function() { 
     var $this = $(this); 
     // nothing to change if this already has large class 
     if ($this.hasClass('large')) { 
      return; 
     } 
     var $previousLargeItem = $items.filter('.large'); 

     $previousLargeItem.removeClass('large'); 
     $this.addClass('large'); 
     $container 
     // update sort data on changed items 
     .isotope('updateSortData', $this) 
      .isotope('updateSortData', $previousLargeItem) 
     // trigger layout and sort 
     .isotope(); 
    }); 
}); 
}); 
</script> 

Answer 2

腳本標記沒有正確關閉

<link rel="stylesheet" href="teststyle.css"> 
<script type="text/javascript" src="jquery.isotope.min.js"></script> 
<script type="text/javascript" src="js.js"></script> 

留下script標籤未閉合可能無法正確下一script包含在頁面

換句話說：這不是jsfiddle問題。