这就是我所拥有的，对于我的生活，我不知道为什么我的同位素不起作用
$( function() {
$('#content').isotope({
itemSelector: '.item',
masonry: {
columnWidth: 100
}
});
});.background {
background-color: lightblue;
width: 1000px;
height: auto;
margin: auto;
}
.tile {
background-color: white;
border: 1px solid black;
overflow: hidden;
float: left;
}
.x300x300 {
width: 300px;
height: 300px;
}
.x300x200 {
width: 200px;
height: 300px;
}
.x200x200 {
width: 200px;
height: 200px;
}
.x150x100 {
width: 100px;
height: 150px;
}<body class="background">
<div id="content">
<div class="tile x300x300">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x300x200">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x200x200">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x150x100">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x150x100">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x300x300">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x150x100">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x300x200">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x200x200">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x150x100">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
<div class="tile x150x100">
<h2 class="box-title">Lorem Ipsum</h2>
<div class="box-text">
Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
</div>
</div>
</div>
所以我有我的脚本标签：
<script src="js/isotope.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/controller.js"></script>
然而，我得到的错误是：
Uncaught TypeError：undefined不是函数controller.js：7（匿名函数）controller.js：7jQuery.Callbacks.fire jquery-1.9.1.js：1037jQuery.Callbacks.self.fireWith jquery-1.9.1。 js：1148jQuery.extend.ready jquery-1.9.1.js：433completed jquery-1.9.1.js：103
这是第7行：$（＆＃39; #content＆＃39;）。isotope（{
为什么我的同位素功能未定义？我有脚本和一切。
------------------------ UPDATE ---------------------- ------------
问题解决了，谢谢
答案 0 :(得分：0)
需要首先定义Jquery，否则同位素不能扩展它。