반응성 벽돌 jQuery 레이아웃 예제

Question

누구나이 사이트에서 반응성있는 유체 레이아웃을 위해 jQuery Masonry 플러그인을 사용하는 방법을 제안 할 수 있습니까?

http://tympanus.net/codrops/collective/collective-2/

구체적;

브라우저 크기를 변경할 때 브라우저의 크기가 3에서 2로 1로 바뀌는데, 이는 벽돌을 사용하는 사이트에서 기대하는 바입니다.하지만 흥미로운 점은 항상 열이 전체 너비를 채울 수 있도록 크기가 조정된다는 것입니다. 내가 본 대부분의 다른 벽돌 사이트는 열 수가 변경되면 열의 오른쪽에 간격을 남깁니다 (예 : http://masonry.desandro.com/) 또는 열이 전체 너비를 채우지 만 열의 수는 동일하게 유지됩니다 (http://masonry.desandro.com/demos/fluid.html). CSS 미디어 쿼리와 결합 된 브라우저 크기 조정의 열 수를 동적으로 설정하고 있거나 CSS3 열을 사용하고 있습니까?

감사합니다.

Answer 1

이것은 우리가보고있는 코드입니다.

jQuery(document).ready(function($) { 
    var CollManag = (function() { 
     var $ctCollContainer = $('#ct-coll-container'), 
     collCnt = 1, 
     init = function() { 
      changeColCnt(); 
      initEvents(); 
      initPlugins(); 
     }, 
     changeColCnt = function() { 
      var w_w = $(window).width(); 
      if(w_w <= 600) n = 1; 
      else if(w_w <= 768) n = 2; 
      else n = 3; 
     }, 
     initEvents = function() { 
      $(window).on('smartresize.CollManag', function(event) { 
       changeColCnt(); 
      }); 
     }, 
     initPlugins = function() { 
      $ctCollContainer.imagesLoaded(function(){ 
       $ctCollContainer.masonry({ 
        itemSelector : '.ct-coll-item', 
        columnWidth : function(containerWidth) { 
         return containerWidth/n; 
        }, 
        isAnimated : true, 
        animationOptions: { 
         duration: 400 
        } 
       }); 
      }); 
      $ctCollContainer.colladjust(); 
      $ctCollContainer.find('div.ct-coll-item-multi').collslider(); 
     }; 
     return { init: init }; 
    })(); 
    CollManag.init(); 
}); 

기본적인 개념은 몇 개의 열을 설정할 수 있는지를 찾는 columnselector를 추가하는 것입니다. 두 번째 단계는 함수에 smartresize event을 사용하는 것입니다. 세 번째 단계는 벽돌의 "동적"너비로 콜을 호출하는 것입니다. 재밌게 보내라 :)