Masonry.js未生效

我只是为了测试我的网站上Masonry.js jQuery插件/效果，得到了从基础做起除了在网站上几乎没有任何东西，甚至复制一切从一个演示网站，它仍然没有工作。不明白为什么。Masonry.js未生效

它看起来像砌体jQuery插件只是没有采取任何效果或加载，但页面加载正确的文件和代码来调用它的行动是完全相同的演示网站，它工作正常。作为一个测试，我甚至有我的样式表直接从这个例子网站连接，和所有的ID和类名是相同的。

示例网站（这个网站工作正常）：http://bit.ly/1kcCmJA

砌体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>

来源

2014-02-26 JordanC26

你引用的砖石版本是从示例站点不同。这可能是问题的根源。请尝试使用砌体jQuery网站提供的说明。 – Jrod

哦！完美，现在工作。谢谢。正如你第一次回答，如果你把这个作为答案，我可以投票，如果你愿意。 – JordanC26

要去页面开放萤火虫我看到：

$container.imagesLoaded is not a function

imagesLoaded是不是原产于jQuery的..你可能需要这个jQuery扩展添加到您的网页

来源

2014-02-26 01:13:17 hamobi

不同版本的砌体插件是这个原因。 v3.1.4 vs v2.1.02 ... – Jack

的示例网站是使用不同版本的jQuery砌体插件。

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

正确的语法：

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

来源

2014-02-26 18:08:44 Jrod

我猜你正在使用最新版本的砌体。你引用的网站使用的Masonry（V2），进入第3版，Desandro删除imagesLoaded，所以如果你想使用imagesLoaded，你必须包括来自Desandro的页面JS文件的旧版本：

http://imagesloaded.desandro.com/

在这种情况下，原来的代码将工作，但更好的方法来做到这将是

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

这可能是矫枉过正，除非你打算在新的图像动态加载/不知道的尺寸您图像作为砌体需要那些正确执行。如果是这样的话，我会继续包括它。

来源

2014-02-26 18:19:55 Ford

Masonry.js未生效

回答

相关问题