如何使用jQuery砌体插件放置图像以开始

  • Z时代
  • 2024-01-10
  • 分类：问答

试图为不同高度/宽度的图像创建一个简单的图像库，并在砌体中搜索插件来执行类似的操作。如何使用jQuery砌体插件放置图像以开始

我试图做一个这样的基于其他砌体上的空盒子布局的示例，但我无法弄清楚你会如何做到这一点将图像放置在这些框中。

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/[email protected]/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="/wp-content/uploads/new2022/20220327voicc/176153745.jpg"></div>  
    <div class="item w2"></div>  
    <div class="item h2"></div>  
    <div class="item"><img src="/wp-content/uploads/new2022/20220327voicc/177153746.jpg"></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砌体插件放置图像以开始 的全部内容， 来源链接： utcz.com/qa/258524.html

回到顶部