列数的选项取决于屏幕分辨率

Question

我试图设置列数的选项取决于屏幕分辨率。 （no_columns：4，） 这是调用函数初始化插件的代码。

<script>
    jQuery(document).ready(function($) {

        $('#blog-landing').pinterest_grid({
            no_columns: 4,  
            padding_x: 0,
            padding_y: 0,
            margin_bottom: 0,
            single_column_breakpoint: 1010
        });
    });
</script>

我尝试使用此代码：

 $(window).resize(function() {columns($(window).width());
if ($(window).width() < 1300) {
   no_columns = 4; } else {
 no_columns = 3; }});

但根本没有成功，有人可以帮我实现这段代码。

Answer 1

您可能希望查看 CSS媒体查询及其ECMAscript界面​​。您可以像

那样使用它们

var mql = window.matchMedia("(min-width: 1300px)");
mql.addListener(function( obj ){
    if( obj.matches ) {
        no_columns = 4;
    } else {
        no_columns = 3;
    }
});