javascript - Masonry.js 没有生效

Question

我只是在我的站点上测试 Masonry.js jQuery 插件/效果，除了基础知识之外，站点上几乎没有任何东西，甚至从演示站点复制了所有内容，但它仍然无法正常工作。不明白为什么。

看起来 Masonry jQuery 插件没有任何效果或加载，但页面正确加载文件并且调用它以执行操作的代码与它在其上运行良好的演示站点上的代码完全相同。作为测试，我什至直接从这个示例站点连接了我的样式表，并且所有 ID 和类名都相同。

直播:http://bit.ly/1k7RgDS

示例网站(适用于该网站):http://bit.ly/1kcCmJA

Masonry jQuery 网站:http://masonry.desandro.com/

HTML

<div id="container">
        <div class="masonryImage">
            <img src="http://lorempixum.com/200/200/food/1" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/150/food/10" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/250/food/3" alt="">
        </div>  
        <div class="masonryImage">
            <img src="http://lorempixum.com/200/200/food/1" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/150/food/10" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/250/food/3" alt="">
        </div>  
        <div class="masonryImage">
            <img src="http://lorempixum.com/200/200/food/1" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/150/food/10" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/250/food/3" alt="">
        </div>  
        <div class="masonryImage">
            <img src="http://lorempixum.com/200/200/food/1" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/150/food/10" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/250/food/3" alt="">
        </div>  
        <div class="masonryImage">
            <img src="http://lorempixum.com/200/200/food/1" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/150/food/10" alt="">
        </div>

        <div class="masonryImage">
            <img src="http://lorempixum.com/200/250/food/3" alt="">
        </div>           
    </div>

jQuery

    <script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="<?php HTTP_HOST ?>/Scripts/masonry.pkgd.min.js"></script>
    <script>
      $(function(){

        var $container = $('#container');

        $container.imagesLoaded( function(){
          $container.masonry({
            itemSelector : '.masonryImage'
          });
        });

      });
    </script>

Answer 1

示例站点使用了不同版本的 jQuery masonry 插件。

如果您使用 masonry.js 上提供的语法它将工作的网站。

正确的语法:

var $container = $('#container');
// initialize
$container.masonry({
  itemSelector: '.masonryImage'
});