取決於窗口大小調整同位素項目

我是一個新手，我正在尋找一個解決方案，以在JavaScript中呈現媒體查詢。我需要根據窗口大小來改變同位素項目的高度。我檢查了現有的主題，但我無法找到確切的答案。除了媒體查詢，我的腳本正在工作。取決於窗口大小調整同位素項目

如何應用if（screen.width < = 550）？

jQuery(function() { 
var jQuerycontainer = jQuery('#isotope-container'); 
jQuerycontainer.addClass('clickable'); 

if (screen.width <= 550) { 
    jQuerycontainer.isotope({ 
     animationEngine : "best-available", 
     itemSelector : '.isotope-element', 
     layoutMode : "perfectMasonry", 
     perfectMasonry : { 
      columnWidth : 52, 
      rowHeight : 15, 
     } 
    }); 
} else if (screen.width > 550) { 
    jQuerycontainer.isotope({ 
     itemSelector : '.isotope-element', 
     layoutMode : "perfectMasonry", 
     perfectMasonry : { 
      columnWidth : 52, 
      rowHeight : 110, 
     } 
    }); 
} 

jQuerycontainer.isotope('reload') etc. etc.

感謝您的任何提示。

來源

2014-02-12 Adrian

下面是來自同位素頁面爲例 http://isotope.metafizzy.co/demos/fluid-responsive.html

來源

2014-02-12 00:21:50 pixelass

謝謝你的提示。我試圖實現它，但我的同位素容器崩潰。我所做的： '的jQuery（函數（）{ \t VAR jQuerycontainer =的jQuery（ '＃同位素容器'）; \t jQuerycontainer.addClass（ '點擊'）; \t jQuerycontainer.isotope（{ \t \t可調整大小：假的， \t \t animationEngine：「最佳可用」， \t \t itemSelector： '.isotope元素'， \t \t layoutMode：「perfectMasonry」， \t \t perfectMasonr Y：{ \t \t \t columnWidth時：52 \t \t \t} \t}）; {rowHeight的：：15 \t ' – Adrian

通過 '$（窗口）.smartresize（函數（）{ \t \t jQuerycontainer.isotope（{ \t \t如果（screen.width <= 550）{perfectMasonry隨訪\t \t} \t \t} \t \t別的 \t \t如果（screen.width> 550）{perfectMasonry：{的rowHeight：110 \t \t \t} \t \t} \t}）; }）; jQuerycontainer.isotope（'reload'）' – Adrian

取決於窗口大小調整同位素項目

回答

相關問題