jquery - 删除图像之间的顶部空间

Question

我得到这个... (img) https://imageshack.com/i/exRHvxtfp

我需要这个... (img) https://imageshack.com/i/pdvA6JXIp

最好的方法是什么？可以用 CSS 吗？我可以用 jQuery 来做吗？我需要最简单的方法来做到这一点

这是我的 CSS...

 <style>
    container{
         background-color:gray; 
    }
    .container img{
        display:inline;
        vertical-align: top;
    }
 </style>

拜托!我需要帮助

Answer 1

Demo

html

<div class="masonry">
    <div class="item"><img src="http://placehold.it/150x50"/></div>
   <div class="item"><img src="http://placehold.it/150x100"/></div>
   <div class="item"><img src="http://placehold.it/150x150"/></div>
   <div class="item"><img src="http://placehold.it/150x50"/></div>
   <div class="item"><img src="http://placehold.it/150x50"/></div>
   <div class="item"><img src="http://placehold.it/150x150"/></div>
   <div class="item"><img src="http://placehold.it/150x200"/></div>
</div>

CSS

.masonry { /* Masonry container */
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}
img {
    width: 100%;
    min-width: 150px;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}
body {
    font: 1em/1.67 'Open Sans', Arial, Sans-serif;
    margin: 0;
    background: #e9e9e9;
}

.wrapper {
    width: 95%;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
}

.item {
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}