размер каменной кладки размер

Question

Я использую масонство для организации изображений на сайте портфолио. Есть ли способ изменить ширину из желоба, если изменяется размер контейнера?

Большое спасибо!

Барт

Answer 1

Простое решение для того, что вы ищете будет иметь слушателя событий JQuery $ (окно) .resize(), и проверьте .width() окна, и в зависимости от по ширине вы можете иметь совершенно отдельный вызов. Я попробовал это, и это работает довольно хорошо ...

var $gridElement = $(".grid-elements").masonry({ 
    columnWidth: 150, 
    gutterWidth: 12, 
}); 

$(window).resize(function(){ 
    var width = $(window).width(); 

    if(width > 1000) { 
     console.log('greater than 1000'); 
     $gridElement.masonry({ 
       columnWidth: 150, // different column width here 
       gutterWidth: 6, // different gutter width here 
     }); 
    } else if (width < 1000) { 
     console.log('less than 1000'); 
     $gridElement.masonry({ 
       columnWidth: 150, // different column width here 
       gutterWidth: 12, // different gutter with here 
     }); 
    } 
}); 

Итак, как вы можете видеть, мы кэшировать «.grid-элементы» выбор JQuery с вызовом .masonry(), а затем в нашей .resize() мы проверяем ширину окна и вызываем метод .masonry() с новым набором параметров.

Также имейте в виду, что приведенный выше код не разрушает, поэтому он будет вызывать .masonry() для каждого пикселя, который вы изменяете. Вы можете check out the answer to this Stack question for that.