Question

我正在尝试将Masonry用于我网站上的照片，我只是在https://willhay.io/masonry/添加了它，以确保在我尝试将其放在照片页面之前一切正常。但是，div没有正确排列，行之间有很多空格。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>Masonry Test</title>
  <link rel="stylesheet" href="mason.css"/>
  <script src="../masonry.pkgd.min.js"></script>
  <script src="../jquery-1.11.3.min.js"></script>
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />

  <script>
    $('.grid').masonry({
      // options
      itemSelector: '.grid-item',
      columnWidth: 160
    });
  </script>

</head>

<body>

<h1>Masonry - columnWidth</h1>

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width3"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width2 grid-item--height3"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height3"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
</div>
</body>
</html>

CSS

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

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
  max-width: 100%;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 160px;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }

此代码直接来自Masonry网站，只删除了额外的功能（调整点击，悬停状态等）。

Answer 1

原来我没有$（文件）.ready（function（）{，一旦我补充说它有效。新的js是：

CTE

与

相比

$(document).ready(function() {
   $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 160
  });

});

这是错误的，没有正确加载。我认为这与砌成在实际页面加载之前计算div位置有关。不太确定，但我很高兴我终于明白了：）

为什么我使用这个Masonry示例代码在我的div之间获得空格？

1 个答案: