砌体 div 自动定位答案

【问题标题】：Masonry div auto-positioning砌体 div 自动定位
【发布时间】：2014-10-28 15:29:22
【问题描述】：

问题

我不确定如何让 div 自动定位自己，而不是在 div 可以进入的地方留下大块空间。我想如果第一个和第二个 div 下的 div 直接在下面。当前的标记和样式表如下所示。对此的任何帮助都会很棒！谢谢！您可以通过在http://codepen.io/pen/ 的相应输入文本字段中复制并粘贴 css 和 html 来查看效果。

# main.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.item 
{
  width:  20em;
  height: auto;
  float: left;
  background-color:rgba(0, 255, 0, 0.3);
  margin: 0.5em;
  word-wrap: break-word;
  font-size: large;
  padding: 0.5em;
}



<!DOCTYPE html />
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="http://masonry.desandro.com/masonry.pkgd.min.js" />
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <div class="masonry">
            <div class="item">
                text
            </div>
            <div class="item">
                texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
            </div>
            <div class="item">
                text
            </div>
            <div class="item">
                text
            </div>
            <div class="item">
                texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
            </div>
            <div class="item">
                text
            </div>
        </div>
    </div>
</body>
</html>

解决方案

我首先删除了标头中无效的 javascript 链接，并将其作为脚本引用移动到 body 标记的末尾。我在我的 HTML 页面中将 <div class="masonry"> 更改为 <div id="masonry">。然后我引用了 jquery 库以及我在其中创建了 Masonry 实例的自定义 javascript 文件。请参阅 sn-p 的答案帖子！

我将把问题和解决方案留在这里，以防任何刚接触砌体的人（比如我自己）在第一次尝试时遇到困难。

【问题讨论】：

没有 codepen 链接（空），缺少一个 grid-sizer 和一个 gutter-sizer。查看文档。使用加载的图像，提供具有实际内容的示例。比较 Masonry 和 Packery 示例之间的差异，您可能会想到 Packery。
谢谢克里斯蒂娜！我已经更新了问题，因为我已经找到了解决方案。我还发布了一个带有 sn-p 的答案。

标签： html twitter-bootstrap position jquery-masonry masonry

【解决方案1】：

答案显示在问题帖子中的问题下方。下面是sn-p的副本。

$(document).ready(function () {
    var masonryContainer = document.querySelector('#masonry');
    var masonry = new Masonry(masonryContainer, {
        // options
        itemSelector: '.item'
    });
});

.item 
{
  width:  20em;
  height: auto;
  float: left;
  background-color:rgba(0, 255, 0, 0.3);
  margin: 0.5em;
  word-wrap: break-word;
  font-size: large;
  padding: 0.5em;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <div id="masonry">
            <div class="item">
                text
            </div>
            <div class="item">
                texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
            </div>
            <div class="item">
                text
            </div>
            <div class="item">
                text
            </div>
            <div class="item">
                texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext
            </div>
            <div class="item">
                text
            </div>
        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

【讨论】：