Question

当每列都有“不均匀”的高度时，基础的网格中断，特别是如果所有列都在一行内。正如您从下面的Jsfiddle示例中看到的那样。

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

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

任何人都有解决方案吗？

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

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

更改基础以将弹性网格https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation-flex.min.css与您的代码一起使用可以获得更好的结果。 https://jsfiddle.net/k07wktgL/1/

＆＃13;

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)});
    }
);

＆＃13;

.columns {
   background-color: red;
}

＆＃13;

<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>

＆＃13;

修复Zurb Foundation Grid的不同高度

1 个答案: