檢測中使用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列時，此功能完美無缺。反正當兩列正在顯示檢測和更改JavaScript的相應

Answer 1

在我與去年底如果基於窗口的大小，以鍛鍊聲明的列數

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

的Javascript能「知道」哪些列我們有兩種方式定位於下一行：

• 使用媒體查詢 - 像JavaScript來確定何時發生包裝。 Modernizr對此很有幫助。
• 檢查每列的offset.top並進行比較。如果它們彼此相鄰，則值將匹配。在不同的任何列偏移顯然不會在同一行

這是一個很大更好/清潔/更容易比試圖基於元素寬度來判斷閱讀等

但是，您可能希望查看display: table/table-cell列和他們的父母，因爲這會給你同樣的高度。

我並不完全確定我知道你在計算什麼，但我認爲你有一些列停止相鄰的較小設備的浮動。

Answer 3

你可以使用一個MediaQueryList，這由現代瀏覽器支持。 polyfill可用於舊版瀏覽器。

用法

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

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