jquery石工-不工作

Question

請有人告訴我我的jQuery砌體代碼哪里出問題了。 我已將鏈接發布到下面的測試頁面：

http://davidlloydphotography.com/home.html

我已按照循序漸進的方式指導Masonry網站（ http://masonry.desandro.com/ ）。 我認為這可能是我初始化jQuery的方式，不確定它的去向，本教程不清楚：

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

不知道為什么它不會流入布局，占位符圖像只是掛在左側:(

我已經在此工作了好幾天了，將不勝感激，這肯定是一個簡單的問題。

Answer 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>