jQuery砌体留下差距
我试图在一个项目中使用jQuery Masonry并且它无法正常工作：网格的右上角有一个间隙。 我已经尝试调整网格宽度和边距，这导致每行一个块或所有块一起运行（但仍然有一个间隙顶部。）
虽然Masonry正在应用它的类并按预期为元素分配绝对定位，但它实际上看起来并不像块重新排列。
我确信我做错了什么，但现在我不太确定。 我从Stack（http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces）上的类似问题中找到了一个工作小提琴并仔细修改它以使用我正在工作的尺寸有了，它似乎无法处理这些元素的选择。
小提琴： http ： //jsfiddle.net/dVPA9/4/
好吧，这不是你问题的真正解决方案，所以我希望你不要对我投票。
我一直在使用这两个其他项目取得了巨大成功：
还有：
此致
对于Masonry和Isotope，你需要记住它在模块上都有效，这意味着你的列宽应该遵循最小公约数（以像素为单位）。 然后，如果您的元素跨越多个列（一个模块），则根据可用的屏幕空间（您有大量元素），第二个元素（比第一个元素宽得多）不能适合第一个元素的右侧（比第二个窄得多）。
此外，您正在为您的砌体#container（#grid）设置固定宽度，这当然会违反插件的整个目的。
亲眼看看：删除宽度：1104px; 在#grid上并将浏览器视图缩小到小提琴页面的最大值 – 你会看到如果有空格，第二个（宽黑色）元素最终将适合第一个（窄灰色）元素的右侧。
因此，这一切只是为您的列宽找到合适的最小公约数，并确保某些元素不是太大而且不会跨越太多列（超过两列）。 然后它会工作。
另请参阅https://stackoverflow.com/a/11814339/963514和https://stackoverflow.com/a/11701171/963514以查看有关类似“问题”的更多说明。
显然这是与砌体和类似解决方案不可磨灭的问题，我决定我需要在这里自己动手。 我还决定在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. }