Как изменить параметр в зависимости от размера экрана?

Question

[Mixa]

Использую один скрипт для построения контента в стиле Pinterest. Но проблема в том, что кол-во колонок фиксировано, а я хотел бы менять его в зависимости от размеров экрана. Может кто подскажет как в данном коде

<script>
$(document).ready(function() {
$('#demo').pinterest_grid({
no_columns: 4,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>

можно внести изменения чтобы менять параметр no_columns при загрузке и после изменений размеров окна в зависимости от ширини окна? Например, если экран больше 1400 пикселей то надо показывать 8 колонок, а если меньше 1024 - то 5 колонок.

Answer 1

[Алексей П]

Попробуйте
$(window).height()
$(window).width()

Comments

[Алексей П]

Так же можно попробовать
screen.width & screen.height

[Mixa]

это я сомг найти ) а как заставить его работать? я пытаюсь городить констуркции типа

function windowSize(){
if ($(window).width() >= '1200'){
$('#blog-landing').pinterest_grid({
no_columns: 8,
padding_x: 12,
padding_y: 12,
margin_bottom: 50,
single_column_breakpoint: 900
});
} else {
$('#blog-landing').pinterest_grid({
no_columns: 5,
padding_x: 12,
padding_y: 12,
margin_bottom: 50,
single_column_breakpoint: 900
});
}
}
$(window).on('load resize',windowSize);

но отсутствие знаний JS не дает сделать работающее и лаконичное решение...

[Алексей П]

Mixa: в if нужно сравнивать с числом, а у Вас- строка

[Алексей П]

Иными словами if ($(window).width() >= 1200){ ... }

Answer 2

[Sratimon]

А обязательно на js ? если я правильно понял суть проблемы можно и на css сделать с помощью медиа запросов !