Question

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

任何帮助都会很棒，因为我几乎都遵循了教程，但它无法正常工作

这就是它的样子

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

问题：我如何获得砌体应该做什么的布局，哪个很好地流入彼此;砌体现场的例子。

Answer 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;
}

jQuery - 砌体布局

1 个答案: