修复不同高度的 Zurb Foundation Grid

Question

Foundation 的网格在每一列有 "uneven" 高度时中断，尤其是当所有列都在一行中时。从下面的 Jsfiddle 示例中可以看出。

我不想使用均衡器，因为它会导致我的网站出现实际性能问题。

我不知道我的 PHP 代码会产生多少列，所以我不能真正将它放在单独的行中。

有人对此有解决方案吗？

[edit] 目前我的解决方案涉及预定义每行的最大列数，并使用计数器来结束和开始新的一行。但它不是很敏感。

var col = '<div class="small-3 columns">content</div>', 
  row = $('.row'), 
    colCount = 30,
    i = 0, 
    maxRange = 1000; 
    
    for(i=0; i<colCount; i++) {
     row.append(col);
    }
    
    $('.columns').each(
     function() {
       $(this).css({'height':Math.floor((Math.random() * 100) + 1)});
      }
    );

.columns {
  background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">

</div>

Answer 1

将 Foundation 更改为在您的代码中使用弹性网格 https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css 应该会得到更好的结果。 https://jsfiddle.net/k07wktgL/1/

var col = '<div class="small-3 columns">content</div>', 
    row = $('.row'), 
    colCount = 30,
    i = 0, 
    maxRange = 1000; 
    
for(i=0; i<colCount; i++) {
    row.append(col);
}
    
$('.columns').each(
        function() {
        $(this).css({'height':Math.floor((Math.random() * 100) + 1)});
    }
);

.columns {
   background-color: red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row"></div>

修复不同高度的 Zurb Foundation Grid

fix Zurb Foundation Grid with different height

css

jquery

zurb-foundation