2

我正在尝试在一个项目中使用 jQuery Masonry，但它无法正常工作：网格的右上角有一个间隙。我尝试调整网格宽度和边距，这会导致每行一个块或所有块一起运行（但右上角仍然有间隙。）

尽管 Masonry 正在应用其类并按预期为元素分配绝对定位，但实际上看起来并没有重新排列块。

我确信我做错了什么，但现在我不太确定。我从 Stack (http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces) 上的一个类似问题中得到了一个工作小提琴，并仔细修改它以使用我正在工作的维度，它似乎无法处理这种元素选择。

小提琴：http: //jsfiddle.net/dVPA9/4/

4

3 回答 3

2

好吧，并不是真正解决您的问题，所以我希望您不会对我投反对票。

我一直在使用这两个其他项目并取得了巨大的成功：

还有：

真挚地，

于 2012-09-20T22:19:33.540 回答
2

对于 Masonry 和 Isotope，您需要记住这一切都适用于一个模块，这意味着您的列宽应该遵循最小公约数（以像素为单位）。然后，如果您的元素跨越多列（一个模块），则取决于可用的屏幕空间（您有巨大的元素），第二个元素（比第一个宽得多）不能安装在第一个元素的右侧（比第二个窄得多）。

此外，您正在为砌体#container (#grid) 设置固定宽度，这当然违背了插件的全部目的。

自己看：删除宽度：1104px；在您的#grid 上并将您的浏览器视图放大到小提琴页面上的最大值 - 您会看到如果有空间，第二个（宽黑色）元素最终将适合第一个（窄灰色）元素的右侧。

因此，这一切都归结为为您的列宽找到一个合适的最小公约数，并确保某些元素不会太大并且不会跨越太多列（超过两列）。然后它将起作用。

另请参阅https://stackoverflow.com/a/11814339/963514和https://stackoverflow.com/a/11701171/963514以了解对类似“问题”的更多解释。

于 2012-09-21T07:21:04.287 回答
2

显然这是 Masonry 和类似解决方案的一个不可磨灭的问题，我决定我需要在这里推出自己的解决方案。我还决定这会在 PHP 中更好地处理，因为默认的浮动 DIV 在很多情况下会有很大的差距。

这是我使用的算法，并带有注释来解释细节。这也可以在 jQuery 中轻松完成，但不利的一面是，对于没有 JavaScript 的用户来说，它看起来很讨厌。

$LeftPos = 0; //Tracks where we are on the grid. Our item grid is three wide, but some items may use up to three units of space.
  $j = 0; //Using a second counter to track total iterations. This is to prevent infinite loops, either because of future concerns I can't predict or because of someone setting a content block to be wider than the containing grid.

  for ($i = 0; $i < sizeOf($Items); $i++){
    if ($LeftPos == 3){ $LeftPos = 0; } //If we filled the third column on the last iteration, we loop back round.
    if ($Items[$i]['Placed'] !== true){ //If we've already put this object into the new array, skip it.
      if ($Items[$i]['SpanWidth'] + $LeftPos <= 3  || $j > (sizeOf($Items) * 3)){ //If inserting this would push us past the third column, save it for when we have more room. But if we've looped over the entire array three times, chances are we're stuck for some reason so just vomit everything out so the user can look at SOMETHING, even if it's an ugly page.
        $Placed++; //Increment the counter for placed objects.
        $Items[$i]['Placed'] = true; //Set this item as placed, too.
        $NewProducts[$i] = $Items[$i]; //Add the current item to the new array.
        $LeftPos = $LeftPos+ $Items[$i]['SpanWidth']; //And calculate our new position on the grid.
      }
    }

    if (($i+1 == sizeOf($Items) && $Placed < sizeOf($Items))) {$i = 0;} //If we reach the end and we have placed less items than we have total, loop through again.
  }
于 2012-09-24T03:56:01.650 回答