javascript - Javascript function based on screen width

Question

Hey I'm trying to decrease the column width of masonry when you get to screen size with: max-width: 450px;

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.box',
    columnWidth: 220,
    isAnimated: !Modernizr.csstransitions,
    isFitWidth: true
  });
});

Here is my Javascript code. What do I add to make it decrease the column width at that screen size??

Or how do I target screen size with an IF statement...if screen size is less than 450 then 'xyz' else the function above...

Answer 1

if(window.screen.availWidth < 450)
{
    // alternative configuration here
}

Answer 2

一个速记的 IF 语句应该可以解决问题。本质上，您是说如果文档宽度小于 450，则 columnWidth 设置为 220，否则 columnWidth 设置为 110。

var $container = $('#container');
      $container.imagesLoaded(function(){
      $container.masonry({
                          itemSelector : '.box',
                          columnWidth: ( $(document).width() < 450 ? 220 : 110 ),
                          isAnimated: !Modernizr.csstransitions,
                          isFitWidth: true
                        });
       });