jQuery - 砌体显示没有错误但不工作？答案

【问题标题】：jQuery - Masonry showing no error yet not working?jQuery - 砌体显示没有错误但不工作？
【发布时间】：2013-03-21 07:08:18
【问题描述】：

我已经尝试了 7 个多小时来整理布局，我希望最终产品看起来像这样 - ！

相反，我得到了这个！

这是正在使用的代码

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 type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="masonry.js"></script>
<script>
  $(function(){
  $('#container').masonry({
    columnWidth: 150,
    itemSelector: 'div' 
    });
});
</script>

<div id="container" class="clearfix masonry">

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

</div>

</head>
</body>

CSS -

html {
  height:100%;
}

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

#container {
    width:900px;
}

.item1,.item2,.item3 {margin:5px;}
.item1 {width:350px;}
.item2 {width:175px;}
.item3 {width:150px;}

有什么想法吗？因为似乎什么都行不通

【问题讨论】：

$('#container').masonry({ columnWidth: 150, itemSelector: 'div' });
@Jashwant 去掉最后一个逗号或者老版本的IE会报错
那是一个错字。我从不这样做，甚至在 php 中也不这样做 :)
其他人有什么想法吗？似乎没有任何效果！
你的 head 标签在一个奇怪的地方关闭，尽管我认为这不是问题。

标签： jquery layout jquery-masonry

【解决方案1】：

这是我制作的fiddle。

我注意到，通过设置较低的列宽数字，它可以改善 Masonry 的工作方式。

所以我将 Scrip 修改为类似的内容：

$(function () {
    $('#container').masonry({
        columnWidth: 1,
        itemSelector: 'div'
    });
});

另外，添加固定的体重/身高可能会有所帮助。尤其是处理项目周围的边距，因为砌体似乎在元素之间的边距方面存在一些问题。

因此，如果您的大项目是 350 像素，请确保下方的项目不超过 (350 -(2*margin)) /2px，以便正确放置它们。

【讨论】：