jQuery - 砌体布局问题答案

【问题标题】：jQuery - masonry layout issuesjQuery - 砌体布局问题
【发布时间】：2013-03-20 15:09:05
【问题描述】：

第一次使用 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;
}

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

这就是它的样子

http://i47.tinypic.com/2jfdr7n.jpg

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

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

【问题讨论】：

你应该在正文之前结束元素。除此之外，您的代码对我来说看起来不错。您是否检查过网络选项卡和控制台？也许有一个错误，或者你的 masonry.js 上出现 404
网络没问题，控制台说masonry有语法错误——对象没有'masonry'方法，相信是这个部分 $("#container") .masonry({ ---有什么想法吗？
您是否按照 Xeano 的建议完成并修复了无效的 HTML？
是的，HTML 已修复，但仍无法正常工作。

标签： jquery layout jquery-plugins jquery-masonry

【解决方案1】：

在 jQuery Masonry 示例中，它为包装器定义了额外的 CSS。

您是否尝试过不同的 CSS 定义？它可能正在寻找高度和宽度属性来获取页面上对象的测量值。

我还建议使用准备好的文档而不是像您所拥有的窗口那样检查您的实现： $(window).ready(function() { >>> $(document).ready(function() {

查看 Masonry 网站的来源。它绝对不同于你这里的，然后使用 firebug 或类似于 debug 的东西。

    var $items = $( items.join('') );
    $items.imagesLoaded(function(){
      $container
        .masonry( 'remove', $loadingItem ).masonry()
        .append( $items ).masonry( 'appended', $items, true );
    });

【讨论】：