如何使用jQuery砌體插件放置圖像以開始

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>