Изотоп-работает на jsFiddle, но не на сайте

Question

Я начал экспериментировать с Isotope на 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 код на моей странице test.html запрашивающего JavaScript и CSS:

<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 вопроса.