更改基于浏览器窗口宽度的参数? [英] Changing a parameter based on browser window width?

问题描述

对于砌体，我正在使用以下代码将columnWidth更改为320屏幕或浏览器窗口的宽度减小到小于1035px.当屏幕宽度大于1035px时，假定columnWidth为240.

With Masonry, I'm using the following code to change columnWidth to 320 when the width of the screen or the browser window is reduced to less than 1035px. When the width of the screen is greater than 1035px, columnWidth is supposed to be 240.

但是，无论屏幕的宽度如何，下面的代码都会导致columnWidth停留在320处.例如，您可以看到我在这个网站上谈论的博客: http://keebs.com/sandbox

However, the code below causes columnWidth to stay at 320 regardless of the width of the screen. For example, you can see what I'm talking about with the blogs on this site: http://keebs.com/sandbox

在全屏上看起来像这样:

On full screen, it looks like this:

将浏览器的宽度调整为小于1035像素时，它看起来像这样:

When the browser is resized down to less than 1035px in width, it looks like this:

基本上，对于第一张图片，我希望列数为3，以便博客可以填充空白空间.为了使列数达到3，我必须将columnWidth更改为240.

Basically, for the first image, I want the number of columns to be 3 so the blogs could fill up the empty space. In order to get the number of columns to 3, I'd have to change columnWidth to 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;

    });


}

推荐答案

为什么不在CSS中使用响应式设计.

Why dont you use responsive desing in your 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
}

这篇关于更改基于浏览器窗口宽度的参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！