Question

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

看起来，Masonry jQuery插件没有任何效果或加载，但页面正确加载文件，并且将其调用为动作的代码与在演示网站上完全相同的Exact相同。作为测试，我甚至直接从这个示例站点连接了样式表，并且所有id和类名都是相同的。

示例网站（此网站正常工作）：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'
});

Answer 2

进入页面并打开萤火虫，我看到了：

$container.imagesLoaded is not a function

imagesLoaded不是jquery本地的东西..你可能需要将这个jquery扩展添加到你的页面

Answer 3

我猜你正在使用最新版本的Masonry。您引用的网站使用旧版Masonry（v2），进入版本3，Desandro已移除imagesLoaded，因此如果您要使用imagesLoaded，则必须包含来自Desandro页面的JS文件：

http://imagesloaded.desandro.com/

在这种情况下，您的原始代码将起作用，但更好的方法是

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

除非您计划动态加载新图像/不知道图像的尺寸，因为砌体需要正确执行这些图像，否则这可能有些过分。如果是这样的话，我会把它包括在内。

Masonry.js没有生效

3 个答案: