Jquery砌體動畫無法正常工作

好吧，所以我第一次嘗試使用砌體，我從http://www.netmagazine.com/tutorials/get-started-jquery-masonry下載了一個演示，演示工程和我遵循了所有的方向。當我試圖甚至將它實現到我自己的網站時，動畫不起作用。Jquery砌體動畫無法正常工作

錯誤

GET file://localhost/Users/Lencor/Desktop/ElaineSite/js/modernizr-2.5.3.min.js   portfolio.html:26 
GET file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js portfolio.html:26 
GET file://localhost/Users/Lencor/Desktop/ElaineSite/js/jquery.masonry.min.js portfolio.html:26 
Uncaught ReferenceError: $ is not defined script.js:1 
Uncaught TypeError: undefined is not a function bootstrap.min.js:6 
GET file://localhost/Users/Lencor/Desktop/ElaineSite/js/jquery-1.7.1.min.js portfolio.html:135

的script.js

$(document).ready(function() { 
    // Initialize Masonry 
    $('#content').masonry({ 
    columnWidth: 320, 
    itemSelector: '.item', 
    isFitWidth: true, 
    isAnimated: !Modernizr.csstransitions 
    }).imagesLoaded(function() { 
    $(this).masonry('reload'); 
    }); 
});

CSS

#content { 
    /*width: 980px;*/ 
    /*width: 95%;*/ 
    width: auto; 
    margin: 0 auto; 
} 

.item { 
    display: block; 
    float: left; 
    width: 300px; 
    margin: 0 20px 20px 0; 
    -webkit-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
    -moz-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
    -ms-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
    -o-transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
    transition: left .4s ease-in-out, top .4s ease-in-out .4s; 
} 

.item img { 
    width: 300px; 
    height: auto; 
}

HTML

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>site</title> 
    <!-- <meta name="description" content=""> --> 
    <meta name="viewport" content="width=device-width"> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <style> 
     body { 
      padding-top: 60px; 
      padding-bottom: 40px; 
     } 
    </style> 


    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> 
    <!-- <link rel="stylesheet" href="css/main.css"> --> 
    <link rel="stylesheet" href="css/style.css"> 

    <script src="js/modernizr-2.5.3.min.js"></script> 


</head> 
<body> 
    <!--[if lt IE 7]> 
     <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> 
    <![endif]--> 

    <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html --> 

    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
       <a class="brand" href="index.html">site title</a> 
       <div class="nav-collapse collapse"> 
        <ul class="nav"> 
         <li class="dropdown"> 
          <a href="portfolio.html" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Retouching</a></li> 
           <li><a href="#">Design</a></li> 
           <li><a href="#">Print Design</a></li> 
          </ul> 
         </li> 
         <li><a href="#about">About</a></li> 
         <li><a href="#contact">Contact</a></li> 
        </ul> 
        <!-- <form class="navbar-form pull-right"> 
         <input class="span2" type="text" placeholder="Email"> 
         <input class="span2" type="password" placeholder="Password"> 
         <button type="submit" class="btn">Sign in</button> 
        </form> --> 
       </div><!--/.nav-collapse --> 
      </div> 
     </div> 
    </div> 

    <div class="container"> 

     <header class="container"> 
     <h1>Masonry Demo by <a href="http://www.lukeshumard.com">Luke Shumard</a></h1> 
     </header> 

     <div id="content" class="container clearfix"> 

     <div class="item"> 
      <img src="img/single-1.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-2.jpg" alt="" /> 
     </div> 

     <div class="item featured"> 
      <img src="img/double-1.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-3.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-4.jpg" alt="" /> 
     </div> 

     <div class="item featured"> 
      <img src="img/double-2.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-5.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-6.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-7.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-8.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-9.jpg" alt="" /> 
     </div> 

     <div class="item"> 
      <img src="img/single-10.jpg" alt="" /> 
     </div> 

     </div> 

     <hr> 

     <footer> 
      <p class='pull-right'><small>&copy; 2012</small></p> 
     </footer> 
    </div> <!-- /container --> 

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script> 

    <script src="js/jquery.masonry.min.js"></script> 
    <script src="js/script.js"></script> 


    <script src="js/vendor/bootstrap.min.js"></script> 

</body>

來源

2012-11-19 Corey Trombley

它登錄螢火 – defau1t

請描述任何錯誤「不工作」？ –

我得到了這些錯誤未捕獲的ReferenceError：未定義$的script.js：1 （匿名函數）的script.js：1點遺漏的類型錯誤：未定義是不是一個函數bootstrap.min.js：6 （匿名函數） bootstrap.min.js：6 （匿名函數） –

$未定義表示您沒有包含jQuery庫。您可以下載它，它包括對您的項目或使用某些CDN的鏈接，有人提供

來源

2013-09-22 17:45:56 user2331875

謝謝。感謝上帝，我仍然沒有停留在此，但我很感激你的回覆。 –

$(document).ready(function() { 
    $('#content').imagesLoaded(function() { 
     var container = document.querySelector('#content'); 
     var msnry = new Masonry(container, { 
      // options 
      colWidth:320, 
      itemSelector: '.item', 
      isFitWidth: true, 
      isAnimated: true, 
      animationOptions: { 
      duration: 1000, 
      easing: 'linear', 
      queue: false 
      }, 
     isInitLayout: false 
     }); 

     msnry._isLayoutInited = true; 
     msnry.layout(); 
    }); 
    });

來源

2016-08-31 08:14:11 afshin

Jquery砌體動畫無法正常工作

回答

相關問題