jQuery Masonry & WordPress

Question

我正试着用jQuery Masonry搭建一个WordPress画廊，但看起来不太对劲。

这是我的代码：

<style type="text/css">
#container {
}
.item {
  width: 200px;
  float: left;
  padding: 10px;
  margin: 10px;
  background: #D8D5D2;
  font-weight: 300;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>

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

<script>
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>

这是HTML：

<div id="container">

<div class="item"><img src="1.JPG" width="200" /></div>
<div class="item"><img src="2.JPG" width="200" /></div>
<div class="item"><img src="3.JPG" width="200" /></div>
<div class="item"><img src="4.JPG" width="200" /></div>

...
</div>

这是输出：

​

​

我做错了什么？

Answer 1

我很久以前在我的Wordpress网站上使用Masonry，它的效果很好，唯一的问题是我不确定代码是什么，因为这是很久以前的事情了，这个网站已经不复存在了。尝试将以下内容添加到CSS中。

overflow:hidden;

Answer 2

这真是太尴尬了。显然，jquery.masonry.min.js到处都找不到，当我将它添加到文件夹中的那一刻，它就开始完美地工作了！感谢大家的善意建议。

Answer 3

第一件让我印象深刻的事情是这句话：

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

它应该是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>