0

好的，所以我第一次尝试使用 Masonry，我从http://www.netmagazine.com/tutorials/get-started-jquery-masonry下载了一个演示，演示有效，我遵循了所有的指示。当我尝试将它实现到我自己的网站时，动画不起作用。

错误

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

脚本.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>

4

2 回答 2

1

$ 未定义意味着您没有包含 jQuery 库。您可以下载它并将其包含到您的项目中，或者使用某人提供的一些 CDN 链接

于 2013-09-22T17:45:56.147 回答
0 
$(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-31T08:14:11.623 回答