如何从砌体图库中删除空白区域

Question

You can check JSFIDDLE

HTML

<div id="container">
    <div class="item">
        <img src="http://placekitten.com/150/130" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/160/120" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/170/110" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/180/100" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/190/110" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/180/120" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/170/130" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/160/140" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/150/130" />
    </div>
</div>

JS

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: 1,
  itemSelector: '.item',
  gutter: 10
});

Answer 1

Just got this working while defining .item as columnWidth in masonry js. And adding some style to .item

SEE THIS FIDDLE

JS

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  columnWidth: '.item',
  itemSelector: '.item'
});

CSS

.item {
    width: 19.8%;
    height: auto;
    margin:0.1%;
}
.item img {
    width: 100%;
    height: auto;
}

Answer 2

How about trying this: (beautiful cats :p)

<div id="container">
    <div class="item">
        <img src="http://placekitten.com/190/110" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/150/130" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/180/120" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/160/120" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/170/110" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/170/130" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/180/100" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/160/140" />
    </div>
    <div class="item">
        <img src="http://placekitten.com/150/130" />
    </div>
</div>

JSFIDDLE

Answer 3

That's just the nature of the plugin; since your code doesn't have any items small enough to fill the space, it skips past it. If you can make the items smaller, even 90% of the current size, it'll be easier for the to fill the given space – think peas in a jar as compared to sand in a jar.

Beyond that, increasing gutter space might make that big gap look less intense, but not fix everything.