Question

我按照getting started masonry的所有步骤操作，但结果完全不同。我希望它看起来像这样：http://iam.beyonce.com/tagged/my_work。但它看起来完全不同，你可以看到：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%;
}

＆＃13;

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

＆＃13;

* { 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%;
}

＆＃13;

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

＆＃13;

砌体网格布局中的图片彼此重叠

1 个答案: