자동 크기 조정 동위 원소

Question

나는이 테마를 http://clapat.ro/berger/으로보고 있으며 그 중간에 그리드가되는 방식을 알고있다. 나는 자바 스크립트 파일을 통해 기웃 거리며 봤는데 자동으로 '.item'클래스의 너비를 기준으로 크기가 조정 된 것처럼 보입니다.

이 종류의 크기 조정을 복제하려고하지만 jQuery에 대한 초보자의 이해로 코드를 쉽게 해독하거나 그리드 요소의 크기를 자동으로 조정할 수 없습니다.

I가 조금 JS 바이올린을했습니다

자신 http://jsfiddle.net/7L9aey1c/

function MasonryPortfolio() { 

    if($('#portfolio-wrap').length > 0){ 

     var $container = $('#portfolio'); 

     $container.isotope({ 
      itemSelector: '.item', 
      gutter:0, 
      transitionDuration: "0.5s" 
     }); 

     $(window).on('resize', function() { 

      var winWidth = window.innerWidth; 
      columnNumb = 1;   
      var attr_col = $('#portfolio').attr('data-col'); 

      if (winWidth >= 1466) { 

       $('#portfolio-wrap').css({width : 1360 + 'px'}); 
       $('#portfolio-wrap.no-gutter').css({width : 1280 + 'px'});    
       var portfolioWidth = $('#portfolio-wrap').width(); 

       if (typeof attr_col !== typeof undefined && attr_col !== false) { 
        columnNumb = $('#portfolio').attr('data-col'); 
       } else columnNumb = 3; 

       postWidth = Math.floor(portfolioWidth/columnNumb)   
       $container.find('.item').each(function() { 
        $('.item').css({ 
         width : postWidth - 80 + 'px', 
         height : postWidth * 0.75 - 80 + 'px', 
         margin : 40 + 'px' 
        }); 
        $('.no-gutter .item').css({ 
         width : postWidth + 'px', 
         height : postWidth * 0.75 + 'px', 
         margin : 0 + 'px' 
        }); 
        $('.item.wide').css({ 
         width : postWidth * 2 - 80 + 'px' 
        }); 
        $('.no-gutter .item.wide').css({ 
         width : postWidth * 2 + 'px' 
        }); 
        $('.item.tall').css({ 
         height : postWidth * 1.5 - 80 + 'px' 
        }); 
        $('.no-gutter .item.tall').css({ 
         height : postWidth * 1.5 + 'px' 
        }); 
        $('.item.wide-tall').css({ 
         width : postWidth * 2 - 80 + 'px', 
         height : postWidth * 1.5 - 80 + 'px' 
        }); 
        $('.no-gutter .item.wide-tall').css({ 
         width : postWidth * 2 + 'px', 
         height : postWidth * 1.5 + 'px' 
        }); 
       }); 


      } else if (winWidth > 1024) { 

       $('#portfolio-wrap').css({width : 1000 + 'px'}); 
       $('#portfolio-wrap.no-gutter').css({width : 940 + 'px'});   
       var portfolioWidth = $('#portfolio-wrap').width(); 

       if (typeof attr_col !== typeof undefined && attr_col !== false) { 
        columnNumb = $('#portfolio').attr('data-col'); 
       } else columnNumb = 3; 

       postWidth = Math.floor(portfolioWidth/columnNumb)   
       $container.find('.item').each(function() { 
        $('.item').css({ 
         width : postWidth - 60 + 'px', 
         height : postWidth * 0.75 - 60 + 'px', 
         margin : 30 + 'px' 
        }); 
        $('.no-gutter .item').css({ 
         width : postWidth + 'px', 
         height : postWidth * 0.75 + 'px', 
         margin : 0 + 'px' 
        }); 
        $('.item.wide').css({ 
         width : postWidth * 2 - 60 + 'px' 
        }); 
        $('.no-gutter .item.wide').css({ 
         width : postWidth * 2 + 'px' 
        }); 
        $('.item.tall').css({ 
         height : postWidth * 1.5 - 60 + 'px' 
        }); 
        $('.no-gutter .item.tall').css({ 
         height : postWidth * 1.5 + 'px' 
        }); 
        $('.item.wide-tall').css({ 
         width : postWidth * 2 - 60 + 'px', 
         height : postWidth * 1.5 - 60 + 'px' 
        }); 
        $('.no-gutter .item.wide-tall').css({ 
         width : postWidth * 2 + 'px', 
         height : postWidth * 1.5 + 'px' 
        }); 
       }); 


      } else if (winWidth > 767) { 

       $('#portfolio-wrap').css({width : 640 + 'px'}); 
       $('#portfolio-wrap.no-gutter').css({width : 600 + 'px'}); 

       var portfolioWidth = $('#portfolio-wrap').width(), 

       columnNumb = 2; 
       postWidth = Math.floor(portfolioWidth/columnNumb)   
       $container.find('.item').each(function() { 
        $('.item').css({ 
         width : postWidth - 40 + 'px', 
         height : postWidth * 0.75 - 40 + 'px', 
         margin : 20 + 'px' 
        }); 
        $('.no-gutter .item').css({ 
         width : postWidth + 'px', 
         height : postWidth * 0.75 + 'px', 
         margin : 0 + 'px' 
        }); 
        $('.item.wide').css({ 
         width : postWidth * 2 - 40 + 'px' 
        }); 
        $('.no-gutter .item.wide').css({ 
         width : postWidth * 2 + 'px' 
        }); 
        $('.item.tall').css({ 
         height : postWidth * 1.5 - 40 + 'px' 
        }); 
        $('.no-gutter .item.tall').css({ 
         height : postWidth * 1.5 + 'px' 
        }); 
        $('.item.wide-tall').css({ 
         width : postWidth * 2 - 40 + 'px', 
         height : postWidth * 1.5 - 40 + 'px' 
        }); 
        $('.no-gutter .item.wide-tall').css({ 
         width : postWidth * 2 + 'px', 
         height : postWidth * 1.5 + 'px' 
        }); 
       }); 


      } else if (winWidth > 479) { 

       $('#portfolio-wrap').css({width : 440 + 'px'}); 
       $('#portfolio-wrap.no-gutter').css({width : 400 + 'px'}); 

       var portfolioWidth = $('#portfolio-wrap').width(), 

       columnNumb = 1; 
       postWidth = Math.floor(portfolioWidth/columnNumb)   
       $container.find('.item').each(function() { 
        $('.item').css({ 
         width : postWidth - 40 + 'px', 
         height : postWidth * 0.75 - 40 + 'px', 
         margin : 20 + 'px' 
        }); 
        $('.no-gutter .item').css({ 
         width : postWidth + 'px', 
         height : postWidth * 0.75 + 'px', 
         margin : 0 + 'px' 
        }); 
        $('.item.wide').css({ 
         width : postWidth - 40 + 'px' 
        }); 
        $('.no-gutter .item.wide').css({ 
         width : postWidth + 'px' 
        }); 
        $('.item.tall').css({ 
         height : postWidth * 1.5 - 40 + 'px' 
        }); 
        $('.no-gutter .item.tall').css({ 
         height : postWidth * 1.5 + 'px' 
        }); 
        $('.item.wide-tall').css({ 
         width : postWidth - 40 + 'px', 
         height : postWidth * 0.75 - 40 + 'px' 
        }); 
        $('.no-gutter .item.wide-tall').css({ 
         width : postWidth + 'px', 
         height : postWidth * 0.75 + 'px' 
        }); 
       }); 


      } 

      else if (winWidth <= 479) { 

       $('#portfolio-wrap').css({width : 280 + 'px'}); 
       $('#portfolio-wrap.no-gutter').css({width : 240 + 'px'}); 

       var portfolioWidth = $('#portfolio-wrap').width(), 

       columnNumb = 1; 
       postWidth = Math.floor(portfolioWidth/columnNumb)   
       $container.find('.item').each(function() { 
        $('.item').css({ 
         width : postWidth - 40 + 'px', 
         height : postWidth * 0.75 - 40 + 'px', 
         margin : 20 + 'px' 
        }); 
        $('.no-gutter .item').css({ 
         width : postWidth + 'px', 
         height : postWidth * 0.75 + 'px', 
         margin : 0 + 'px' 
        }); 
        $('.item.wide').css({ 
         width : postWidth - 40 + 'px' 
        }); 
        $('.no-gutter .item.wide').css({ 
         width : postWidth + 'px' 
        }); 
        $('.item.tall').css({ 
         height : postWidth * 1.5 - 40 + 'px' 
        }); 
        $('.no-gutter .item.tall').css({ 
         height : postWidth * 1.5 + 'px' 
        }); 
        $('.item.wide-tall').css({ 
         width : postWidth - 40 + 'px', 
         height : postWidth * 0.75 - 40 + 'px' 
        }); 
        $('.no-gutter .item.wide-tall').css({ 
         width : postWidth + 'px', 
         height : postWidth * 0.75 + 'px' 
        }); 
       }); 


      }  
      return columnNumb; 


     }).resize(); 

전체 소스 코드 (포트폴리오 벽돌과) http://clapat.ro/berger/js/scripts.js

내가 복제하는 방법에 대한 조언을 좀 찾고 있어요 자신의 눈금 또는 '.item'요소에 'width2 height2'클래스를 정적으로주는 대신 자동으로 요소의 크기를 조정하는 방법에 대해 설명합니다.

Answer 1

처음 사용하는 부트 스트랩, 둘째 use isotope v2 및 그 element sizing new feauture.

var $container = $('#container').isotope({ 
itemSelector: '.item', 
masonry: { 
    columnWidth: '.grid-sizer', 
    isFitWidth: true 
} 
}); 

귀하의 HTML은 다음과 같이 woud :

<div class=container"> 
    <div class="row"> 
    <div id="container"> 
     <div class="grid-sizer col-sm-2 col-md-3 col-lg-3"></div> 
     <div class="item col-sm-4 col-md-3 col-lg-2"> 
     <div class="item col-sm-2 col-md-6 col-lg-4"> 
     <div class="item col-sm-8 col-md-9 col-lg-8"> 
    </div> 
    </div> 
</div> 

CSS

#container { 
    margin: 0 auto; 
} 

다만이 레이아웃의 중심을 것이다하지만 것이다

jQuery를에

당신이 실행하는 것 또한 반응 적이다. grid-sizer은 columnWidth이고 너비가 your bootstrap classes에 기초하여 모든 것을 반응 적으로 만들 것입니다.이 위에는 각 행에 표시되는 요소의 수는 부트 스트랩 클래스 설정을 기반으로합니다.

참고 : 다른 크기를 원하면 .items 너비의 절반을 사용하는 격자를 지정해야합니다. See this answer for a more complete code.

그게