使用JavaScript檢測引導網格中的列數

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適用於較舊的瀏覽器。

用法

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

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Testing_media_queries

Answer 3

Javascript可以通過兩種方式“知道”哪些列位於下一行：

• 使用類似media-query的javascript來確定何時發生換行。 Modernizr對此非常有用。
• 檢查每列的offset.top並進行比較。 如果它們彼此相鄰，則值將匹配。 具有不同偏移量的任何列顯然都不會在同一行上

比起嘗試根據元素寬度等進行判斷，閱讀起來要好/干凈/容易得多。

但是，您可能需要查看display: table/table-cell列和它們的父級的display: table/table-cell ，因為這也會給您同樣的高度。

我不能完全確定我知道您要計數的內容，但是我假設對於較小的設備，您的列會停止互相浮動。