jQuery 砌体和 WordPress答案

【问题标题】：jQuery Masonry & WordPressjQuery 砌体和 WordPress
【发布时间】：2012-08-10 22:56:59
【问题描述】：

我正在尝试使用 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>

这是输出：

我做错了什么？

【问题讨论】：

标签： jquery image wordpress gallery jquery-masonry

【解决方案1】：

很久以前，我在我的 Wordpress 网站上使用了 Masonry，结果非常好，唯一的问题是我不确定代码是什么，因为这是很久以前的事了，并且该网站不再存在。尝试将以下内容添加到您的 CSS。

overflow:hidden;

【讨论】：

另外，让#container 成为溢出：隐藏，看看你会得到什么。

【解决方案2】：

这很尴尬。显然 jquery.masonry.min.js 无处可寻，当我将它添加到文件夹中时，它开始完美运行！谢谢大家的好意建议。

【讨论】：

【解决方案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>

【讨论】：

不，// 没问题 - 这相当于使用 https 或 http，具体取决于用于加载页面的内容
是的，不，那没有任何作用，但感谢您告诉我这件事。
啊哈，我今天学到了一些新东西，谢谢@c2h5oh。杰西卡，你试过imagesLoaded 插件吗？
@Edenbauer 我该如何实现呢？我不太确定。
用here 显示的替换你当前的 mansonry 初始化代码。它是“imagesLoaded 插件”标题下的那个。基本上你将初始化代码包装在$container.imagesLoaded(function(){});