尝试为不同高度/宽度的图像创建一个简单的图像库,并遇到了砖石结构以寻找可以执行类似操作的插件。
我试图根据砖石上的空盒子布局的其他示例对此做一个模型,但我无法弄清楚如何将图像放置在这些盒子中。
http://jsfiddle.net/zigzag/kz2b79s3/
这就是我组织一个磁贴的方式:
<div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>
正如您在 fiddle 中看到的那样,图像正在“渗出”而不是包含在框中。一定在这里漏掉了一些愚蠢的东西。
最佳答案
您只是缺少一个根据其父容器调整图像的 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>
关于javascript - 如何使用 jQuery masonry 插件放置图像开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47613014/