砌体网格布局中的图片相互重叠

Question

我遵循了 getting started masonry but my result is completely different. I want it to look like this: http://iam.beyonce.com/tagged/my_work. But it looks totally different as you can see: https://jsfiddle.net/saitam/tfomnuqs/

上的所有步骤

这是一个示例代码：

<!-- Masonry -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="css/style.css">

<body>

<div class="grid">

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg">
      </div>
    </a>
  </div>

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg">
      </div>
    </a>
  </div>

  <div class="grid-item">
    <a href="#">
      <div class="brightness">
        <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg">
      </div>
    </a>
  </div>


</div>

</body>

非常感谢您的帮助。

Answer 1

试试这个代码 为图像提供 100% 宽度

.brightness img {
    max-width: 100%;
}

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});

* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }

body { font-family: sans-serif; }

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

.grid {
  background: #DDD;
}

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

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

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}


/* masonry */
.grid-item {
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}


.brightness img:hover {
    opacity: .5;
}
.brightness img {
    max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="...">
    </div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="...">
</div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="...">
</div></a>
  </div>
  
    <div class="grid-item">
   <a href="#">
      <div class="brightness">
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="...">
    </div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="...">
</div></a>
  </div>
  <div class="grid-item">
   <a href="#">
      <div class="brightness">
<img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="...">
</div></a>
  </div>
</div>

砌体网格布局中的图片相互重叠

Pictures in Masonry grid layout are overlapping each other

html

css

masonry