jQuery - 砌体布局答案

【问题标题】：jQuery - Masonry layoutjQuery - 砌体布局
【发布时间】：2013-03-20 14:19:32
【问题描述】：

第一次使用 jquery，我试图让基本的砌体风格工作，我的 html 中有以下代码...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>_Box</title>

<link href="styles.css" rel="stylesheet" type="text/css">

<body>

<script src="jquery.js"></script>
<script src="masonry.js"></script>
<script>
$(window).ready(function() {
    $("#container").masonry({
          itemSelector: '.item',
          columnWidth: 240,
          isAnimated: !Modernizr.csstransitions
        });
});
</script>

<div id="container">

<div class="item"><img src="images/eventbox.png"></img></div>
<div class="item"><img src="images/forumbox.png"></img></div>
<div class="item"><img src="images/weekbox.png"></img></div>
<div class="item"><img src="images/weekbox.png"></img></div>
<div class="item"><img src="images/weekbox.png"></img></div>
<div class="item"><img src="images/weekbox.png"></img></div>
<div class="item"><img src="images/top10box.png"></img></div>
<div class="item"><img src="images/eventbox.png"></img></div>

</div>

</body>
</head>

以及我的 css 文件中的以下内容...

html {
  height:100%;
}

body {
  width:950px;
  height:100%;
  margin:0 auto;
  margin-top:100px;
  background-image: url(images/gridbg.png);
}

.item{
    float: left;
    padding: 5px;
    margin: 5px;
}

任何帮助都会很棒，因为我几乎遵循了教程但它不起作用

这就是它的样子

如果有帮助，图像的宽度和高度不同。

问题：我如何使布局符合砌体应该做的事情，即很好地相互融合；砌体现场的示例。

【问题讨论】：

问题是什么？
请参考tinypic，图都堆起来了

标签： jquery layout jquery-masonry

【解决方案1】：

你应该添加一个columnWidth:

$(window).ready(function() {
    $("#container").masonry({
          itemSelector: '.item',
          columnWidth: 240,
          isAnimated: !Modernizr.csstransitions
        });
});

另外，请确保您已正确包含 jQuery 脚本和 masonry.js 脚本。

并将以下 CSS 添加到您的代码中：

.item{
    float: left;
    padding: 10px;
    margin: 10px;
}

【讨论】：

这样做会给我以下信息：tinypic.com/r/2vn120o/6 仍然不正确 - 脚本也都正确包含
我现在有i47.tinypic.com/2jfdr7n.png 虽然我希望第二行的第三个框来填补这个空白？我能做到的任何方式。
我不确定 - 不要粗鲁，我想我已经回答了最初的问题。如果您愿意，请打开第二个问题并发布更多html 和css，您将获得更多答案。这是我所能提供的所有信息
@bok 问题是因为底部的两个 div 比左上角的顶部 div 宽。它们需要达到相同的宽度。我给你的代码是正确的。
宽度已调整但问题仍然存在