问题
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.
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:
When the browser is resized down to less than 1035px in width, it looks like this:
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.
So here's the code!
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;
});
}
回答1:
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
}
来源：https://stackoverflow.com/questions/22496769/changing-a-parameter-based-on-browser-window-width