[英]How to place images using jQuery masonry plugin to start
试图为不同高度/宽度的图像创建一个简单的图像画廊,并遇到了砌砖的问题,以寻找可实现类似功能的插件。
我试图根据砌体上空盒子布局的其他示例对此做一个样机,但我不知道要如何将图像放置在这些盒子中。
http://jsfiddle.net/zigzag/kz2b79s3/
这是我组织一个图块的方式:
<div class="item"> <img src="https://www.mulierchile.com/random-image/random-image-001.jpg"> </div>
正如您在小提琴中看到的那样,图像正在“出血”,而不是被包含在盒子中。 在这里一定错过了一些愚蠢的事情。
您只是缺少一个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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.