동위 원소 및 미디어 쿼리

Question

절대적으로 내 머리카락을 꺼냅니다. GitHub에는 흑백 솔루션이 제공되지 않는 것으로 보입니다.이 솔루션은 상당히 단순한 개념처럼 보이기 때문에 이상합니다. 아마 나는 그것을 얻지 못한다. 항목을 필터링 할 Isotope를 사용하여 -

기본적으로, 나는 유체 및 반응 포트폴리오를 만들려고하고 있습니다. 필터링이 잘 작동하고 4 열은 완전히 유동적이며 창 크기를 조정하면 모든 것이 잘 어울립니다.

그러나는 모바일 및 태블릿 레이아웃에 대해, I 단순히 2 열 레이아웃에 4 열 레이아웃에서 적응할 필요가있다. ..

$(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

희망이 도움이 !!