这就是我所拥有的，我一生都不明白为什么我的同位素不起作用
$( 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>
但是我收到的错误是:
未捕获的类型错误:未定义不是函数controller.js:7(匿名函数)controller.js:7jQuery.Callbacks.fire jquery-1.9.1.js:1037jQuery.Callbacks.self.fire与jquery-1.9.1。 js:1148jQuery.extend.ready jquery-1.9.1.js:433completed jquery-1.9.1.js:103
这是第七行:$('#content').isotope({
为什么我的同位素函数未定义？我有剧本和一切。
------------------------更新---------------------- ------------
问题已解决，谢谢
最佳答案
需要先定义Jquery，否则isotope无法扩展它。
关于javascript - 为什么我的同位素不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26454979/