jquery - Jquery Masonry not accommodating different heights

Question

I'm currently trying to get jquery masonry to accomodate with different image heights, but it is not wanting to work.

CSS:

  #container {
    background-color:red;
    width:1000px;
    text-align:center;
    margin: 0 auto;
    }

    .item {

    float:left;
    margin:10px;
    width:275px;
    background-color:red;

}

Jquery:

  <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script src="/jquery.masonry.min.js"></script>
<script>
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 275
  });
});
</script>

HTML:

<div id="container">
<div class="item"><img src="/green"></div>

<div class="item"><img src="/purple"></div>

<div class="item"><img src="/green"></div>

<div class="item"><img src="/green"></div>

<div class="item"><img src="/purple"></div>

<div class="item"><img src="/green"></div>
 </div>

In an ideal world, the two purple squares would be beneath each other.

Interestingly, if I remove the jquery masonry, nothing changes.

Answer 1

如果您修复了我在上面的评论中提到的 HTML 问题，并在加载 jQuery Masonry 文件之前加载 jQuery，这有望解决您的问题。

我之前的评论：

也许尝试修复您的 HTML 文档，看看是否有帮助。您的 STYLE 标记应在 HEAD 内，并且您没有结束 HEAD 标记。