Question

尝试为不同高度/宽度的图像创建一个简单的图像库，然后遇到砌体，以寻找类似的插件。

我试图根据砌体上的空盒子布局的其他例子做一个这样的模型，但我无法弄清楚如何将图像放在这些盒子中。

http://jsfiddle.net/zigzag/kz2b79s3/

这是我组织一个瓷砖的方式：

 <div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>

正如你在小提琴中看到的那样，图像正在“流血”而不是被包含在盒子里。一定是在这里错过了一些愚蠢的东西。

Answer 1

您刚刚错过了一个css类，它根据其父容器调整图像

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

见下面的例子

$(function() {

  $('#container').masonry({
    itemSelector: '.item',
    columnWidth: 100
  });

});

body {
  font-family: sans-serif;
}

#container {
  border: 1px solid;
  padding: 5px;
}

.item {
  width: 60px;
  height: 60px;
  float: left;
  margin: 5px;
  background: #CCC;
}

.item.w2 {
  width: 130px;
}

.item.h2 {
  height: 130px;
}

.item img {
  display: block;
  width: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div id="container">
  <div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>
  <div class="item w2"></div>
  <div class="item"><img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"><img src="https://static.pexels.com/photos/356378/pexels-photo-356378.jpeg"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"><img src="https://pixabay.com/photo-1210559/"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

如何使用jQuery masonry插件启动图像

1 个答案: