jQuery砖石离开差距 [英] jQuery masonry leaving gap

问题描述

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

I'm attempting to use jQuery Masonry in a project and it's not working properly: there's a gap in the top-right corner of the grid. I've tried adjusting the grid width and margins, which results in either one block per row or all blocks being run together (but still with a gap topright.)

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

It doesn't actually look like the blocks are being rearranged at all, though Masonry is applying its class and assigning absolute positioning to the elements as expected.

我相信我做错了事，但现在我不太确定。我从一个类似的问题在Stack（http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces）和仔细修改它使用我工作的维度与

I was convinced that I was doing something wrong, but now I'm not so sure. I've taken a working fiddle from a similar question on Stack (http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces) and carefully modified it to use the dimensions I'm working with, and it just seems to be incapable of handling this selection of elements.

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

推荐答案

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

As apparently this is an indelible issue with Masonry and similar solutions, I decided I'd need to roll my own here. I also decided this would be better handled in PHP, as the default, floated DIVs will have large gaps in a lot of circumstances.

这里是我使用的算法，来解释细节。这也可以在jQuery中进行，但是对于没有JavaScript的用户来说，它可能会让用户感到讨厌。

Here's the algorithm I used, with comments to explain the fine points. This could have been done in jQuery trivially as well, but on the downside it'd look nasty for users without 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砖石离开差距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！