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

Question

对于Masonry，当屏幕或浏览器窗口的宽度减小到小于1035px 时，我使用以下代码将columnWidth 更改为320。当屏幕宽度大于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
}