Jquery masonry 砌体:适合宽度但保持最大容器尺寸?

Jquery masonry 砌体:适合宽度但保持最大容器尺寸?,jquery-masonry,Jquery Masonry,根据砖石文档中的示例,我通过设置isFitWidth=true,并在砖石容器上设置{margin:0 auto}来将砖石布局居中 当我有大量的项目要显示时,这是一个非常好的解决方案。例如,假设我的视口宽度刚刚超过5列,我将看到所有项目的布局,5到一行,整个容器位于视口的中心。可爱 当我的物品少于5件时,问题就出现了。在这种情况下,容器在视口中保持居中,但会收缩以适应项目的数量。因此,如果我有两个项目,我将在屏幕中间有两个列,每个都有一个项目。 我希望看到的是容器保持大小(在本例中为5列),并保持

根据砖石文档中的示例,我通过设置
isFitWidth=true
,并在砖石容器上设置
{margin:0 auto}
来将砖石布局居中

当我有大量的项目要显示时,这是一个非常好的解决方案。例如,假设我的视口宽度刚刚超过5列,我将看到所有项目的布局,5到一行,整个容器位于视口的中心。可爱

当我的物品少于5件时,问题就出现了。在这种情况下,容器在视口中保持居中,但会收缩以适应项目的数量。因此,如果我有两个项目,我将在屏幕中间有两个列,每个都有一个项目。

我希望看到的是容器保持大小(在本例中为5列),并保持居中,并将内容放在LTR(在我的示例中)

我尝试过媒体查询,并根据视口设置容器的最小宽度。这看起来是可行的,但很麻烦——我不想每次列大小改变时都要更新媒体查询(包括重新计算所有容器总宽度)。(我相信用户会希望进行一些更改)

另一个解决方案可能是向内容中添加一些伪项,并将它们的可见性设置为隐藏,但这也不是很优雅

有没有我遗漏的更简单的解决方案


还有一点-我也在左上角和右上角的某些项目上盖章。我认为这不会影响任何解决方案。

好的,所以我能找到的唯一有效方法就是使用媒体查询。我设置了一个电子表格,以便在更改列和边沟大小时帮助重新计算。以下是变量和方程,如果它们有用:

如果:

  • WC=柱的宽度
  • WG=排水沟宽度
  • N=列数
  • CON=容器的宽度
然后:

  • CON=N*WC+(N-1)*WG
您可以设置一个电子表格并使用WC和WG进行实验,范围为N=1…10这将为您提供每个N值的CON大小。视口的宽度需要为CON加上CON(或其父对象)上的任何水平边距和填充

为了设置媒体查询,我采取的方法是容器应尽可能宽,但仍能整齐地容纳精确的列。例如,如果视口可以容纳5列(但不是6列),我将相应的最小宽度设置为CON。这使容器整齐地居中

举个例子,下面是我的一个媒体查询:

@media (min-width: 996px) and (max-width: 1361px) { .content-container { min-width: 966px; } }
我希望这对某人有帮助。我将把这个问题留待几天,以防有其他解决办法