我一直在尝试 Masonry,但无法让它完全按照我的意愿工作。我使用的元素的宽度和高度各不相同,但都适合网格(4 种不同的大小,所有最小+边距的倍数)。我还计算了可以精确拟合的元素分布(最小的 7 个,所有其他元素的 4 个)。
然而,很少有砖石能够整齐地安装它们,有时底部会潜伏一个,有时会错位。总是这样,在一个视图中,我可以看到需要移动哪些项目以使其适合。
有没有办法让砖石在移动元素时更具侵略性?还是重复两次以确保没有空格?
我一直在尝试 Masonry,但无法让它完全按照我的意愿工作。我使用的元素的宽度和高度各不相同,但都适合网格(4 种不同的大小,所有最小+边距的倍数)。我还计算了可以精确拟合的元素分布(最小的 7 个,所有其他元素的 4 个)。
然而,很少有砖石能够整齐地安装它们,有时底部会潜伏一个,有时会错位。总是这样,在一个视图中,我可以看到需要移动哪些项目以使其适合。
有没有办法让砖石在移动元素时更具侵略性?还是重复两次以确保没有空格?
您可能应该在这里查看砌体的“老大哥”同位素。请注意,如果您的元素按特定顺序排序或以特定顺序固定 - 并且比单个列宽更宽 - 它们可以在窄浏览器宽度下“阻止”一列。
编辑也许这个小提琴解释得更好一点。如果您查看那个并且 - 在观察 div 中的数字时 - 您会看到下一个砌体元素(红色元素 5)不可能适合白色方块,因为它必须在元素 4 之后;所以它必须结束的地方意味着,只有三排适合,一个会有一个白色的间隙。也许您可以使用 Isotope 的 shuffle 和/或 reLayout 方法并牺牲以严格的顺序排列您的元素?最好是解决您的问题的jsfiddle。
<article>
<div class="tile blue"><p>1</p></div>
<div class="tile black"><p>2</p></div>
<div class="tile tall yellow"><p>3</p></div>
<div class="tile grey"><p>4</p></div>
<div class="tile wide red"><p>5</p></div>
<div class="tile green"><p>6</p></div>
<div class="tile grey"><p>7</p></div>
<div class="tile blue"><p>8</p></div>
<div class="tile green"><p>9</p></div>
</article>
$('article').isotope({
itemSelector : '.tile',
masonry: {
columnWidth: 100
}
});
article .tile {
display: block;
float: left;
box-sizing: border-box;
width: 100px;
height: 100px;
font-size: 3em;
font-weight: 700;
padding: 0 6px;
color: #fff;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
border:1px dotted black;
}
article .tile.wide {
width: 200px;
}
article .tile.tall {
height: 200px;
}
.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }
为了扩展丹的回答,我自己也遇到了这个问题,Packery似乎是最新的;更多维护版本的砌体 - 来自同一作者。我不清楚为什么这两个项目作为单独的实体存在,而后者只修复了错别字。
好消息是——它几乎完全是一个替代品。我必须做的唯一更改(除了名称masonry
->packery
使用的地方)是删除一个选项,因为它是 Packery 中的默认选项和唯一选项。
也就是说isFitWidth: true
,我试图让 Masonry 包装的东西接近 Packery 在没有任何选择的情况下做得很好。
Packery 的另一个不错的变化是gutter: x
适用于垂直和水平排水沟。在 Masonry 中,这只是水平的——虽然margin-bottom
在 CSS 中微不足道,但感觉就像是不必要的 hack。