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

Question

您可以查看 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

在砌体js中将.item定义为columnWidth时，这样做了。并为.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

尝试这个:(美丽的猫：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

这就是插件的本质;由于您的代码没有足够小的项目来填充空间，因此它会跳过它。如果你能把这些物品做得更小，甚至是当前尺寸的90％，那么填充给定的空间会更容易 - 想想罐子里的豌豆和罐子里的沙子相比。

除此之外，增加排水沟空间可能会使这个大差距看起来不那么强烈，但不能解决所有问题。