同位素與媒體查詢

Question

絕對把我的頭髮拉出來。在GitHub上似乎沒有提供黑白解決方案 - 這很奇怪，因爲它看起來像一個相當簡單的概念。也許我只是不明白。

基本上，我想創建一個流體和響應組合 - 採用Isotope篩選項目。過濾效果很好，4列完全流暢，當您調整窗口大小時，一切看起來都很棒。

無論其，用於移動設備和平板佈局，我只需從4列佈局適應2列佈局。

我嘗試這樣做：。

$(window).load(function(){ 

    var $container = $('#thumbs'); 
    $container.isotope({ 
     filter: '*', 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false, 
     }, 
    }); 

    // initialize Isotope 
    $container.isotope({ 
     // options... 
     resizable: false, // disable normal resizing 
     // set columnWidth to a percentage of container width 
     masonry: { columnWidth: $container.width()/4 }, 
    }); 

    // update columnWidth on window resize 
    $(window).smartresize(function(){ 
     $container.isotope({ 
      // update columnWidth to a percentage of container width 
      masonry: { columnWidth: $container.width()/4 } 
     }); 
    }); 

// My attempt at using media queries to change 'columnWidth' 
    $(window).resize(function() { 
     var width = $(window).width(); 
     if (width < 768) { 
      $container.isotope({ 
       // update columnWidth to half of container width 
       masonry: { columnWidth: $container.width()/2 } 
      }); 
     } 
    }); 
}); 

沒有工作:(

任何幫助，將不勝感激

Answer 1

這應該設置你的列數然後你只需鴻溝與columns。

var columns; 

// set column number 
setColumns(); 

// rerun function when window is resized 
$(window).on('resize', function() { 
    setColumns(); 
}); 

// the function to decide the number of columns 
function setColumns() { 
    if($(window).width() <= 768) { 
    columns = 2; 
    } else { 
    columns = 4; 
    } 
} 

Answer 2

我覺得有一個更好的你仍然可以使用CSS媒體查詢的方式。看到我的答案在這裏：https://stackoverflow.com/a/20270911/1010892

希望幫助！