@abr_711

Как подредактировать скрипт, чтобы он вычислял ширину окна и при загрузке веб страницы?

Всем привет.
Я в этом деле недавно. И у меня возникла проблема.
Подключил jquery и jquery-плагин BlocksIt.js. Плагин отвечает за создание динамической сетки. Есть скрипт, и нужно чтобы при загрузке веб-страницы скрипт вычислял размер окна и в зависимости от этого выводил то или иное количество колонок.

Пока что он выводит изначально фиксированное количество этих самых колонок, вне зависимости от ширины окна. А вычисление и подстраивание идет только при событии resize.

В общем, мне нужно чтобы он вычислял и подстраивал не только при резайсе но и перед загрузкой страницы.

Много гуглил, но мало что смог найти.

Надеюсь на вашу помощь)

Вот сам срипт:

$(document).ready(function() {
//blocksit define
$(window).load( function() {
$('#masonry').BlocksIt({
numOfCol: 4,
offsetX: 8,
offsetY: 8
});
});

//window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 440;
col = 1
} else if(winWidth < 880) {
conWidth = 660;
col = 2
} else if(winWidth < 1100) {
conWidth = 880;
col = 3;
} else {
conWidth = 1100;
col = 4;
}

if(conWidth != currentWidth) {
currentWidth = conWidth;
$('#masonry').width(conWidth);
$('#masonry').BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8
});
}
})
});
  • Вопрос задан
  • 225 просмотров
Пригласить эксперта
Ответы на вопрос 2
Попробуй так
$(document).ready(function() {
//blocksit define
(function(){
$('#masonry').BlocksIt({
numOfCol: 4,
offsetX: 8,
offsetY: 8
});
})();
Ответ написан
Комментировать
@fedyagubkin
Как-то так:

function numRowChange() {
     if ($(window).width() <= '800') {
      $('.libContent').BlocksIt({
        numOfCol: 2,
        offsetX: 7,
        offsetY: 10,
        blockElement: '.libBlock'
});
   } else {
        $('.libContent').BlocksIt({
        numOfCol: 4,
        offsetX: 7,
        offsetY: 10,
        blockElement: '.libBlock'
});
   }

}

$(window).on('load resize', numRowChange); // Вешаем обработчик на событие загрузки и изменения размера
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы