Question

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

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

我确信我做错了什么，但现在我不太确定。我在Stack（http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces）的类似问题中采取了一个工作小提琴，并仔细修改它以使用尺寸I＆＃ 39;与之合作，似乎无法处理这些元素选择。

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

Answer 1

嗯，这不是你问题的真正解决方案，所以我希望你不要对我投票。

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

还有：

https://github.com/xlune/jQuery-vGrid-Plugin

此致

Answer 2

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

另外，你正在为你的砌体#container（#grid）设置一个固定的宽度，这当然无视插件的整个目的。

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

所以，这一切只是为你的列宽找到一个合适的最小公约数，并确保一些元素不是太大而且不会跨越太多列（超过两列）。然后它会工作。

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

Answer 3

显然这是一个与砌体和类似解决方案不可磨灭的问题，我决定我需要在这里自己动手。我还认为在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.
  }

jQuery砌体留下差距

3 个答案: