div의 격자에서 간격 감지

Question

EDIT 해결책이 발견되었습니다!

약 blog post입니다. 여기에 Github repo!

여러 크기의 상자로 구성된 div의 격자를 만드는 중입니다.이 크기는 높이와 너비로 설정되어 있지만 페이지가로드 될 때마다 동적으로 생성되므로 다른 격자가 있습니다.

내 문제 - 벽돌을 사용해 보았지만 간격을 남기고 바람을 피웠고 동위 원소도 시도했습니다. 현재 레이아웃 중단을 초래하는 요소를 떠 다니고 있습니다. 이으로 구축하는 방법

- 다음, 나는 "블록"을 계산하는 열 너비에 따라 내가 화면 크기를 계산하고 1에서 6까지의 페이지에 가장 열 수를 결정하는이 블록은 본질적으로 완벽한 그리드입니다 . 그런 다음 요소를 반복하고 1x1, 1x2, 2x2 크기를 지정합니다. 누락 된 공간을 감지 할 수있는 좋은 방법이 있나요 - - 현재 내가 이상 내 빨간색과 검은 색 상자를 배치하고 여기에 참고로

다른 무작위로 생성 된 그리드

내 질문입니다 녹색으로 된 내 "블록"의 또 다른 그리드, 내가 공간을 잃어버린 곳을보기 위해서. 배낭 포장 문제뿐 아니라 배낭 포장 문제에 대해서도 읽었으며 그 중 하나에 대해 이해하기가 힘듭니다.

내가 시도한 것 - 최상의 크기를 결정하기 위해 블록을 배치했지만 계산을 시도했지만 이상한 동작이 계속 발생합니다. 나는 또한 벽돌과 동위 원소를 사용해 보았습니다.

불규칙한 아래쪽 가장자리에는 문제가 없지만 실제 그리드에는 간격이 없어야합니다.

참고 - 격자는 잠재적으로 끝없는 요소로 구성됩니다. 요소를 가져 와서 아래 영역의 요소를 복사하여 누락 된 부분에 배치하면 " shift "요소 - 누락 된 공간을 찾는 방법을 알아야합니다.

도움말이나 올바른 방향을 가리키는 것이 좋습니다. 당신은 단순히 열 div의 배치, 열에 배치하는 경우 여기에

는

(function() { 
    GRID = function(el, sel) { 
     var self = this, 
      ran, ranSize, h, w; 

     self.options = { 
      el: $(el), 
      sel: $(sel), 
      cols: 1, 
      block: { 
       height: 0, 
       width: 0 
      }, 
      matrix: { 
       w: [], 
       h: [], 
       t: [], 
       l: [] 
      }, 
      row: { 
       height: 0, 
       width: 0 
      }, 
      col: { 
       height: 0, 
       width: 0 
      } 
     }; 

/* 
     * Size array 
     */ 
     self.sizes = []; 
     self.sizes[0] = [2, 2]; 
     self.sizes[1] = [1, 2]; 
     self.sizes[2] = [1, 1]; 



     self.setup = function() { 

/* 
      * Setup all options 
      */ 
      // block size 
      self.options.block.height = (window.innerWidth/self.cols())/1.5; 
      self.options.block.width = (window.innerWidth/self.cols()); 

      // row 
      self.options.row.width = window.innerWidth; 


      for (var i = 0; i < 60; i++) { 
       $(".grid").append('<div class="box"></div>'); 
      } 

      self.size_boxes(); 


     } 
     self.size_boxes = function() { 

      if (self.cols() == 1) { 
       self.options.sel.height(self.options.block.height); 
       self.options.sel.width(self.options.block.width); 
      } 
      else { 
       self.options.sel.each(function() { 

        $this = $(this); 

        ran = Math.floor(Math.random() * self.sizes.length); 
        ranSize = self.sizes[ran]; 

        if ($this.hasClass('promoted')) { 
         ran = 0; 
        } 
        if ($this.hasClass('post')) { 
         ran = 2; 
        } 
        h = self.options.block.height * self.sizes[ran][6]; 
        w = self.options.block.width * self.sizes[ran][0]; 

        // box sizes 
        $this.height(h); 
        $this.width(w); 
       }); 
      } 
      $(".grid .box").height(self.options.block.height); 
      $(".grid .box").width(self.options.block.width); 
     } 
     self.cols = function() { 
/* 
      * Determine cols 
      */ 
      var w = Math.floor(window.innerWidth); 
      var cols = 0; 

      if (w < 480) { 
       cols = 1; 
      } 
      else if (w > 480 && w < 780) { 
       cols = 2; 
      } 
      else if (w > 780 && w < 1080) { 
       cols = 3; 
      } 
      else if (w > 1080 && w < 1320) { 
       cols = 4; 
      } 
      else if (w > 1320 && w < 1680) { 
       cols = 5 
      } 
      else { 
       cols = 6; 
      } 
      return cols; 
     } 
     self.resize = function() { 
      $(".grid").height(window.innerHeight); 
      self.options.block.height = (window.innerWidth/self.cols())/1.5; 
      self.options.block.width = (window.innerWidth/self.cols()); 

      self.options.row.width = window.innerWidth; 

      self.size_boxes(); 
     } 

     self.setup(); 
     return self; 

    }; 
})(); 
var _GRID = new GRID('.gallery', '.box');​ 

Answer 1

부울 값의 메모리 내 행렬을 사용하여 "완벽한 그리드"를 추적합니다. 이 매트릭스는 공백이 채워지는 지 여부를 저장합니다. 상자 중 하나를 배치 할 때마다 어떤 사각형이 가득 차 있는지 계산하고 매트릭스를 업데이트합니다.

Answer 2

... 여기 jsfiddle

인 JS의 기본 코드입니다. 예를 들어, 당신이 결정 한 경우 4 열이있을 것을 각 열에서 div의 동일 높이의 경우 물론

<div> 
    <div>Column 1, Div 1</div> 
    <div>Column 1, Div 2</div> 
    <div>Column 1, Div 3</div> 
    <div>Column 1, Div 4</div> 
</div> 
<div> 
    <div>Column 2, Div 1</div> 
    <div>Column 2, Div 2</div> 
    <div>Column 2, Div 3</div> 
    <div>Column 2, Div 4</div> 
</div> 
<div> 
    <div>Column 3, Div 1</div> 
    <div>Column 3, Div 2</div> 
    <div>Column 3, Div 3</div> 
    <div>Column 3, Div 4</div> 
</div> 
<div> 
    <div>Column 4, Div 1</div> 
    <div>Column 4, Div 2</div> 
    <div>Column 4, Div 3</div> 
    <div>Column 4, Div 4</div> 
</div> 

,이 경우에만 작동합니다.