【发布时间】：2014-10-20 06:49:16
【问题描述】：
这就是我所拥有的，在我的一生中，我不明白为什么我的同位素不起作用
$( 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 is not a function controller.js:7(anonymous function) 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 行：$('#content').isotope({
为什么我的同位素函数未定义？我有剧本和一切。
----------更新---------- ------------
问题已解决，谢谢
【问题讨论】：
-
您是否尝试先放置 jQuery 脚本，看看是否可行？
标签： javascript jquery jquery-isotope