jquery - 如何从砌体图像库中删除空白

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

刚刚在 masonry js 中定义.item时开始工作。columnWidth并添加一些风格.item

看这个小提琴

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%，那么填充给定空间会更容易——想想罐子里的豌豆和罐子里的沙子。

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