Question

嘿我正在尝试通过以下方式减小屏幕尺寸时减小砌体的列宽：最大宽度：450px;

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

这是我的Javascript代码。我应该添加什么来减少该屏幕大小的列宽？

或者如何使用IF语句定位屏幕尺寸...如果屏幕尺寸小于450，那么'xyz'否则上面的函数...

Answer 1

速记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
                        });
       });

Answer 2

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

基于屏幕宽度的Javascript功能

2 个答案: