Question

我使用javascript来设置div的高度，以确保网格中div的每一行具有相同的高度

每个div都设置为：

<div class="col-xs-12 col-sm-6 col-md-4">

因此，在不同尺寸的设备上，它们显示为3列，2列或单列

我的javascript如下：

function fitRows( $container, options ) {
var cols = options.numColumns,
   $els = $container.children(),
   maxH = 0, j,
   doSize;

doSize = ( $container.width() != $els.outerWidth(true) );

$els.each(function( i, p ) {

  var $p = $( p ), h;

  $p.css( 'min-height', '' );
  if ( !doSize ) return;

  h = $p.outerHeight( true );
  if ( i % 3 == cols - 1 ) {
     for ( j=cols;j;j--) {
        $p.css( 'min-height', maxH );
        $p = $p.prev();
     }
     maxH = 0;
  } else {

     maxH = Math.max( h, maxH );
  }

   });
}

$(function() {

   var opts = {
  numColumns: 3
  };

   fitRows( $( '.tiles' ), opts );

   $( window ).on( 'resize', function() {
  fitRows( $( '.tiles' ), opts );
   });
   $( window ).on( 'load', function() {
  fitRows( $( '.tiles' ), opts );
   });
});

当显示3列或1列时，这非常有效。无论如何都要检测何时显示2列并相应地更改javascript

Answer 1

最后，我根据窗口的大小选择了一个if语句来训练列数

if ($(window).width() >= 992 ){
    $columns = 3;
}
else if ($(window).width() >= 768 ){
    $columns = 2;
}       
else {
    $columns = 1;   
}                       
var opts = {    
    numColumns: $columns
};

然后将i % 3替换为i % cols

Answer 2

您可以使用现代浏览器支持的MediaQueryList。 polyfill适用于旧版浏览器。

<强>用法

如果（window.matchMedia("(min-width:480px)").matches) //do something

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries

Answer 3

Javascript可以通过两种方式“知道”我们在下一行中定位的列：

使用类似媒体查询的javascript来确定何时发生换行。 Modernizr非常适合这种情况。
检查每列的offset.top并进行比较。如果它们彼此相邻，则值将匹配。任何不同偏移的列显然都不在同一行

比基于元素宽度等判断要好得多/更干净/更容易阅读。

但是，您可能需要查看display: table/table-cell列及其父级，因为这样也会给您提供相同的高度。

我不完全确定我知道你在计算什么，但我认为你的列不会停靠在较小的设备上。

使用javascript检测引导网格中的列数

3 个答案: