根据浏览器窗口宽度更改参数？

Question

使用Masonry，当屏幕宽度或浏览器窗口缩小到columnWidth以下时，我使用以下代码将320更改为1035px 。当屏幕宽度大于1035px时，columnWidth应为240。

但是，无论屏幕宽度如何，下面的代码都会导致columnWidth保持320。例如，您可以通过此网站上的博客了解我正在谈论的内容：http://keebs.com/sandbox

全屏显示如下：

当浏览器的宽度调整为小于1035px时，它看起来像这样：

基本上，对于第一张图片，我希望列数为3，这样博客就可以填满空白区域。为了将列数设置为3，我必须将columnWidth更改为240。

所以这是代码！

if(jQuery().isotope) {

    $container = jQuery('#masonry');

    $container.imagesLoaded( function() {

        $container.isotope({
            itemSelector : '.item',
            masonry: {
                columnWidth: $(document).width() > 1035 ? 240 : 320
            },
            getSortData: {

                order: function($elem) {
                    return parseInt($elem.attr('data-order'));
                }

            },
            sortBy: 'order'
        }, function() {

            // Isotope Chrome Fix   
            setTimeout(function () {        
                jQuery('#masonry').isotope('reLayout'); 
            }, 1000);

        });


    }); 

    // filter items when filter link is clicked
    $container = jQuery('#masonry');

    jQuery('#filter li').click(function(){

        jQuery('#filter li').removeClass('active's);
        jQuery(this).addClass('active');

        var selector = jQuery(this).find('a').attr('data-filter');

        $container.isotope({ filter: selector });

        return false;

    });


}

Answer 1

为什么不在css中使用响应式设计。

@media screen and(max-width:700px)
{
  //your css content goes here depending what you wanna show when screen resizes to 700px,this will work good in mobiles also
}