jquery砌体 - 不工作

【问题标题】：jquery Masonry - Not workingjquery砌体 - 不工作
【发布时间】：2016-01-08 12:25:20
【问题描述】：

请有人告诉我我的 jQuery 砌体代码哪里出了问题。我已经在下面发布了指向我的测试页面的链接：

http://davidlloydphotography.com/home.html

我已按照 Masonry 网站 (http://masonry.desandro.com/) 的分步指南进行操作。我认为这可能是我初始化 jQuery 的方式，不确定它的去向，教程不清楚：

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 700
});

不知道为什么它不会流入布局，占位符图像只是挂在左边:(

任何帮助将不胜感激我已经在这几天，它一定是一个简单的问题。

【问题讨论】：

对于初学者，你甚至没有初始化 Masonry！将 $('.grid') 更改为 $('#grid') 或在您的 HTML 中将
更改为

标签： javascript jquery jquery-masonry

【解决方案1】：

您应该只使用一个版本的 jQuery（不是 2 个，具体取决于浏览器），并将您的 js 放在页面底部并使用“文档准备好”加载砌体。如果要加载许多图像，请考虑使用imagesloaded。

HTML：

 <div id="grid">
 <div class="grid-item">
        <img src="http://lorempixum.com/200/200/food/1" alt="" />
    </div>

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

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

JS：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>  

<script>
 $(document).ready(function() {
 $('#grid').masonry({
 // options
  itemSelector: '.grid-item',
 columnWidth: 700
});
});
</script>

【讨论】：