Question

我一直在尝试为投资组合网站设置砌体布局，但是图像似乎在网格中无法正确对齐，因为项目往往会相互重叠。有人可以指出我是否正确使用了jQuery还是遇到了其他问题？谢谢！

我确保我正在调用正确的选择器，这些项目似乎保持重叠。

jQuery

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

CSS

.grid {
  max-width: 1200px;
}

.grid-item {
  width: 200px;
  height: 180px;
  float: left;
}

img {
  max-width:200px;
  height: auto;
}

这是我链接项目文件夹中的.js的方式

<head>
  <meta charset = "utf-8">
  <link rel="stylesheet" href="./style.css" type:"text/css">
  <title>Victor Zhang</title>

  <script src="./masonry.pkgd.min.js" type = "text/javascript"></script>
  <script src="./masonryjQuery.js" type = "text/javascript"></script>
</head>

我的HTML其余版本

  <div class="grid">

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Venmo-Final.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/EQT.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/ezgif-4-99d82a0722.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Homepage+1+-+Standard+Web.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/steam+app+gif.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/Bounce-Morph---Final-Cut_2.gif">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/BART+Map+Final-02.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/arkangel2.png">
      </div>

      <div class="grid-item">
          <img src="https://s3-us-west-1.amazonaws.com/victorzhangportfolio/CIG.png">
      </div>
  </div>
</body>

我认为这足以使砖石网格正常工作，但是我的图像重叠并且无法正确填充空间。我是否需要在CSS中定义更明确的参数？感谢您的帮助，我非常感谢。

Answer 1

如果您有机会在jQuery插件上选择砖石布局的纯CSS实现，请检查this。请参见此处使用CSS column属性的方式。

同时，如果您使用的jQuery插件也在内部遵循相同的方法，我怀疑“浮动”可能是罪魁祸首！

jQuery Masonry无法正确对齐或填充网格中的图像

1 个答案: