html - 砌体div自动定位 - Thinbug

砌体div自动定位

时间：2014-10-28 15:29:23

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

问题

我不确定如何让div自动定位自己，而不是留下div可以进入的大块空间。我想如果第一和第二div下的div将直接位于下方。目前的标记＆amp;样式表如下所示。任何有关这方面的帮助都会很棒！谢谢！您可以通过在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库以及一个自定义的javascript文件，我在其中创建了一个Masonry实例。请参阅答案帖子以获取摘录！

我会留下问题＆amp;解决方案，以防万一新的砌体（像我一样）在他/她第一次尝试时遇到困难。

1 个答案:

答案 0 :(得分：0)

答案显示在问题帖子中的问题下方。以下是代码段的副本。

$(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>