jQuery Masonry没有正确地对齐或填充网格中的图像

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实现的豪华任何机会，检查这出。 请参阅CSS列属性的使用方式。

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

jQuery Masonry没有正确地对齐或填充网格中的图像

问题描述

1 个解决方案

解决方案1
0 2019-05-13 10:30:47

jQuery Masonry没有正确地对齐或填充网格中的图像

问题描述

1 个解决方案

解决方案1 0 2019-05-13 10:30:47

解决方案1
0 2019-05-13 10:30:47